Die Eingabe von Datum, Uhrzeit, IP-Adresse usw. auf einer Webseite erfordert bestimmte Formatbeschränkungen, da sonst die Kommunikation zwischen dem Programm und dem Programm schwierig wird.
Kürzlich habe ich an einem Programm gearbeitet, das diesen Aspekt nutzen musste. Im Internet habe ich entsprechende Programme gefunden, die jedoch sehr umständlich zu bedienen waren, sodass ich eines selbst implementieren musste.
Implementieren Sie zunächst zwei Funktionen, um den Cursor zu bedienen:
// Aktuelle Cursorposition einer Textfeld-Steuerfunktion abrufen 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;
}
//Setzen Sie die aktuelle Cursorposition einer Textfeld-Steuerfunktion 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.
Schirmen Sie in OnKeyDown zunächst die Standardtastaturverarbeitung des Systems ab
// versiegeln Sie die herkömmliche Verarbeitung window.event.returnValue = false
und 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 .
// Behandeln Sie den Tastenschalter (nKeyCode) selbst
{
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.
if (strText.match(expMask))
{
//Das Eingabeformat ist korrekt objTextBox.value = strText;
}
Bewegen Sie abschließend den Cursor an die entsprechende Stelle.
//Den 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.
Im Anhang finden Sie den vollständigen Code:
// Steuern Sie gemäß dem angegebenen regulären Ausdruck die OBJ-Darstellungsfunktion mask(objTextBox,mask)
{
//Mask 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);
// Gedrückter Tastencode var nKeyCode = window.event.keyCode;
if (nKeyCode > 95) nKeyCode -= (95-47);
// Traditionelle Verarbeitung versiegeln window.event.returnValue = false;
// Behandeln Sie den Tastenschalter (nKeyCode) selbst
{
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;
}
//Den Cursor bewegen setCursor(objTextBox,nCursorPos);
}
// Ermittelt die aktuelle Cursorposition einer Textfeld-Steuerfunktion 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 einer Textfeld-Steuerfunktion setCursor(obj,num){
range=obj.createTextRange();
range.collapse(true);
range.moveStart('character',num);
range.select();
}
Verwendung:
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:
Verwendung eines Datum/Uhrzeit-Maskenfelds
<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
<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})$')">