Die Eingabe von Datum, Uhrzeit, IP-Adresse usw. in eine Webseite erfordert bestimmte Formatbeschränkungen, da es sonst schwierig wird, mit dem Programm zu kommunizieren. Ich habe kürzlich ein Programm erstellt, das diesen Aspekt verwenden muss im Internet, aber mit der Verwendung. Sie klingen alle sehr schlecht, also musste ich selbst eines implementieren.
Implementieren Sie zunächst zwei Funktionen, um den Cursor zu bedienen:
Kopieren Sie den Codecode wie folgt:
// Aktuelle Cursorposition eines Textfeld-Steuerelements abrufen
Funktion getPos(obj)
{
obj.focus();
var workRange=document.selection.createRange();
obj.select();
var allRange=document.selection.createRange();
workRange.setEndPoint(StartToStart,allRange);
var len=workRange.text.length;
workRange.collapse(false);
workRange.select();
return len;
}
// Setzt die aktuelle Cursorposition eines Textfeld-Steuerelements
Funktion setCursor(obj,num){
range=obj.createTextRange();
range.collapse(true);
range.moveStart('character',num);
range.select();
}
Die Hauptidee der Hauptfunktionsimplementierung besteht darin, beim Drücken der Tastatur einige Vorgänge auszuführen, die ich im onKeyDown-Ereignis entworfen habe.
Schützen Sie in onKeyDown zunächst die Standardtastaturverarbeitung des Systems
Kopieren Sie den Codecode wie folgt:
// Traditionelle Verarbeitung versiegeln
window.event.returnvalue = false;
Verarbeiten Sie dann die entsprechenden Tastaturnachrichten, die verarbeitet werden müssen.
Verarbeiten Sie hier nur ein paar notwendige Dinge, da das Textfeld selbst nicht zu viele Benutzervorgänge erfordert. Bewegen Sie daher den Cursor vorwärts, zurück und löschen Sie die Vorgänge, sodass Ihr Textfeld jetzt über grundlegende Funktionen verfügt .
Kopieren Sie den Codecode wie folgt:
// Behandeln Sie den Knopf selbst
switch(nKeyCode)
{
Fall 8:// wenn die Aktion eine Rücktaste ist [<-]
{
strText = strText.substr(0,nCursorPos-1) + strText.substr(nCursorPos, nTextLen-nCursorPos);
nCursorPos--;
brechen;
}
case 46:// wenn die Aktion del[del] ist
{
strText = strText.substr(0,nCursorPos) + strText.substr(nCursorPos+1,nTextLen-nCursorPos-1);
nCursorPos--;
brechen;
}
case 38:// Wenn die Aktion die Richtungstaste ist [oben]
case 39:// Wenn die Aktion die Pfeiltaste [rechts] ist
{
nCursorPos++;
brechen;
}
case 37:// Wenn die Aktion die Pfeiltaste [links] ist
case 40:// Wenn die Aktion die Richtungstaste ist [unten]
{
nCursorPos--;
brechen;
}
Standard :
{
strText = strText.substr(0,nCursorPos) + String.fromCharCode(nKeyCode) + strText.substr(nCursorPos,nTextLen);
nCursorPos++;
if (nCursorPos>strText.length)
{
nCursorPos=strText.length;
}
brechen;
}
}
Bei jeder anderen Nachricht werden sichtbare und unsichtbare Zeichen hinzugefügt und der Cursor bewegt sich zurück. Siehe den Abschnitt zur Standardbehandlung oben.
Stellen Sie dann fest, ob die Maske korrekt ist. Wenn sie korrekt ist, ist die Eingabe zulässig und die Wertanzeige wird dem Textfeld hinzugefügt.
Kopieren Sie den Codecode wie folgt:
if (strText.match(expMask))
{
//Das Eingabeformat ist korrekt
objTextBox.value = strText;
}
Bewegen Sie abschließend den Cursor an die entsprechende Stelle.
// Cursor bewegen
setCursor(objTextBox,nCursorPos);
Beenden!
Der Hauptzweck besteht darin, die Tastaturmeldungen des Systems durch Ihre eigene Verarbeitung zu ersetzen und die Meldungen des Systems zu blockieren, damit Sie maximale Kontrolle erlangen.
Auf diese Weise entsteht eine TEXTBOX, die das Format des angegebenen regulären Ausdrucks einschränkt.
Kopieren Sie den Codecode wie folgt:
//Steuern Sie die OBJ-Darstellung basierend auf dem angegebenen regulären Ausdruck
Funktion mask(objTextBox,mask)
{
//Maske
expMask = new RegExp(mask);
//Der Text im aktuellen Textfeld
var strText =objTextBox.value;
// Textlänge
var nTextLen=strText.length;
//Aktuelle Cursorposition
var nCursorPos=getPos(objTextBox);
//Tastencode gedrückt
var nKeyCode = window.event.keyCode;
if (nKeyCode > 95) nKeyCode -= (95-47);
// Traditionelle Verarbeitung versiegeln
window.event.returnvalue = false;
// Behandeln Sie den Knopf selbst
switch(nKeyCode)
{
Fall 8:// wenn die Aktion eine Rücktaste ist [<-]
{
strText = strText.substr(0,nCursorPos-1) + strText.substr(nCursorPos, nTextLen-nCursorPos);
nCursorPos--;
brechen;
}
case 46:// wenn die Aktion del[del] ist
{
strText = strText.substr(0,nCursorPos) + strText.substr(nCursorPos+1,nTextLen-nCursorPos-1);
nCursorPos--;
brechen;
}
case 38:// Wenn die Aktion die Richtungstaste ist [oben]
case 39:// Wenn die Aktion die Pfeiltaste [rechts] ist
{
nCursorPos++;
brechen;
}
case 37:// Wenn die Aktion die Pfeiltaste [links] ist
case 40:// Wenn die Aktion die Richtungstaste ist [unten]
{
nCursorPos--;
brechen;
}
Standard :
{
strText = strText.substr(0,nCursorPos) + String.fromCharCode(nKeyCode) + strText.substr(nCursorPos,nTextLen);
nCursorPos++;
if (nCursorPos>strText.length)
{
nCursorPos=strText.length;
}
brechen;
}
}
if (strText.match(expMask))
{
//Das Eingabeformat ist korrekt
objTextBox.value = strText;
}
// Cursor bewegen
setCursor(objTextBox,nCursorPos);
}
// Aktuelle Cursorposition eines Textfeld-Steuerelements abrufen
Funktion getPos(obj)
{
obj.focus();
var workRange=document.selection.createRange();
obj.select();
var allRange=document.selection.createRange();
workRange.setEndPoint(StartToStart,allRange);
var len=workRange.text.length;
workRange.collapse(false);
workRange.select();
return len;
}
// Setzt die aktuelle Cursorposition eines Textfeld-Steuerelements
Funktion setCursor(obj,num){
range=obj.createTextRange();
range.collapse(true);
range.moveStart('character',num);
range.select();
}
Anwendung:
1. Legen Sie den Standardanfangswert für das unbestimmte Format fest. Beispiel: Der Anfangswert des Datums- und Uhrzeitformats ist // ::, was (Jahr/Monat/Tag Stunde:Minute:Sekunde) bedeutet. Die IP ist... (192.168.0.1). Legen Sie einfach ein Zeichen fest, das den regulären Ausdruck nicht verletzt.
2. Rufen Sie die Maskenfunktion im onKeyDown-Ereignis des TEXT-Felds des Formulars auf. Der Parameter objTextBox ist der Name des angegebenen Textfelds. Die Parametermaske ist eine Maske im regulären Ausdrucksformat.
Beispiel:
So verwenden Sie ein Datum/Uhrzeit-Maskenfeld
Kopieren Sie den Codecode wie folgt:
<input name=i_etmend type=text id=i_etmend value={I_ETMEND} maxlength=19 onkeydown=mask(i_etmend, '^(([0-9]{0,4})/-([0-9]{0 ,2})/-([0-9]{0,2}) ([0-9]{0,2}):([0-9]{0,2}):([0-9]{0,2}))$')>
Zur Verwendung des IP-Maskenfelds
Kopieren Sie den Codecode wie folgt:
<input name=i_bip type=text id=i_bip value={I_BIP} maxlength=15 onkeydown=mask(i_bip, '^([0-9]{0,3}[/.][0-9]{0, 3}[/.][0-9]{0,3}[/.][0-9]{0,3})$')>