La saisie de la date, de l'heure, de l'adresse IP, etc. dans une page Web nécessite certaines restrictions de format, sinon il sera difficile pour le programme de communiquer avec le programme.
Récemment, je travaillais sur un programme qui devait utiliser cet aspect. J'ai trouvé des programmes correspondants sur Internet, mais ils étaient très lourds à utiliser, j'ai donc dû en implémenter un moi-même.
Implémentez d’abord deux fonctions pour faire fonctionner le curseur :
// Récupère la position actuelle du curseur d'une fonction de contrôle de zone de texte 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();
retourner len;
}
//Définit la position actuelle du curseur d'une fonction de contrôle de zone de texte setCursor(obj,num){
range=obj.createTextRange();
range.collapse(true);
range.moveStart('caractère',num);
range.select();
}
L'idée principale de l'implémentation de la fonction principale est d'effectuer certaines opérations lorsque le clavier est enfoncé, ce que j'ai conçu dans l'événement OnKeyDown.
Dans OnKeyDown, protégez d'abord le traitement du clavier par défaut du système
// scellez le traitement traditionnel window.event.returnValue = false
puis traitez les messages clavier correspondants qui doivent être traités.
Traitez simplement quelques éléments nécessaires ici, car la zone de texte elle-même ne nécessite pas trop d'opérations utilisateur, alors déplacez le curseur vers l'avant, reculez et supprimez les opérations, afin que votre zone de texte ait des fonctions de base. L'opération est maintenant très fluide. .
// Gérez vous-même l'interrupteur à bouton (nKeyCode)
{
cas 8:// si l'action est un retour arrière[<-]
{
strText = strText.substr(0,nCursorPos-1) + strText.substr(nCursorPos, nTextLen-nCursorPos);
nCursorPos--;
casser;
}
cas 46:// si l'action est del[del]
{
strText = strText.substr(0,nCursorPos) + strText.substr(nCursorPos+1,nTextLen-nCursorPos-1);
nCursorPos--;
casser;
}
cas 38:// Si l'action est la touche de direction [supérieur]
cas 39:// Si l'action est la touche fléchée [droite]
{
nCurseurPos++ ;
casser;
}
case 37:// Si l'action est la touche fléchée [gauche]
cas 40:// Si l'action est la touche de direction [en bas]
{
nCursorPos--;
casser;
}
défaut :
{
strText = strText.substr(0,nCursorPos) + String.fromCharCode(nKeyCode) + strText.substr(nCursorPos,nTextLen);
nCurseurPos++ ;
si (nCursorPos>strText.length)
{
nCursorPos=strText.length;
}
casser;
}
}
Tout autre message ajoutera un caractère. Des caractères visibles et invisibles seront ajoutés et le curseur reculera. Voir la section de gestion par défaut ci-dessus.
Déterminez ensuite si le masque est correct. S'il est correct, alors la saisie est légale et l'affichage de la valeur est ajouté à la zone de texte.
si (strText.match(expMask))
{
//Le format d'entrée est correct objTextBox.value = strText;
}
Enfin, déplacez le curseur à l'emplacement approprié.
//Déplacer le curseur setCursor(objTextBox,nCursorPos);
Finition!
L'objectif principal est de remplacer les messages du clavier du système par votre propre traitement et de bloquer les messages du système, afin que vous puissiez obtenir un contrôle maximal.
De cette façon, une TEXTBOX qui restreint le format de l'expression régulière spécifiée est née.
Ci-joint le code complet :
// Selon l'expression régulière spécifiée, contrôle la fonction de représentation OBJ mask(objTextBox,mask)
{
//Masque expMask = new RegExp(masque);
//Le texte dans la zone de texte actuelle var strText =objTextBox.value;
// Longueur du texte var nTextLen=strText.length;
// Position actuelle du curseur var nCursorPos=getPos(objTextBox);
// Code de touche enfoncée var nKeyCode = window.event.keyCode;
if (nKeyCode > 95) nKeyCode -= (95-47);
// Scelle le traitement traditionnel window.event.returnValue = false;
// Gérez vous-même l'interrupteur à bouton (nKeyCode)
{
cas 8:// si l'action est un retour arrière[<-]
{
strText = strText.substr(0,nCursorPos-1) + strText.substr(nCursorPos, nTextLen-nCursorPos);
nCursorPos--;
casser;
}
cas 46:// si l'action est del[del]
{
strText = strText.substr(0,nCursorPos) + strText.substr(nCursorPos+1,nTextLen-nCursorPos-1);
nCursorPos--;
casser;
}
cas 38:// Si l'action est la touche de direction [supérieur]
cas 39:// Si l'action est la touche fléchée [droite]
{
nCurseurPos++ ;
casser;
}
cas 37:// Si l'action est la touche fléchée [gauche]
cas 40:// Si l'action est la touche de direction [en bas]
{
nCursorPos--;
casser;
}
défaut :
{
strText = strText.substr(0,nCursorPos) + String.fromCharCode(nKeyCode) + strText.substr(nCursorPos,nTextLen);
nCurseurPos++ ;
si (nCursorPos>strText.length)
{
nCursorPos=strText.length;
}
casser;
}
}
si (strText.match(expMask))
{
//Le format d'entrée est correct objTextBox.value = strText;
}
//Déplacer le curseur setCursor(objTextBox,nCursorPos);
}
// Récupère la position actuelle du curseur d'une fonction de contrôle de zone de texte 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();
retourner len;
}
// Définit la position actuelle du curseur d'une fonction de contrôle de zone de texte setCursor(obj,num){
range=obj.createTextRange();
range.collapse(true);
range.moveStart('caractère',num);
range.select();
}
Utilisation :
1. Définissez la valeur initiale par défaut au format indéfini. Par exemple : la valeur initiale du format de date et d'heure est "//::", ce qui signifie (année/mois/jour heure:minute:seconde). L'adresse IP est "..." (192.168.0.1). En fait, définissez simplement un caractère qui ne viole pas l'expression régulière.
2. Appelez la fonction masque dans l'événement OnKeyDown de la zone TEXTE du formulaire. Le paramètre objTextBox est le nom de la zone de texte spécifiée. Le masque de paramètres est un masque au format d'expression régulière.
Exemple :
Pour utiliser une boîte de masque datetime
<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}))$')">
Pour utiliser la boîte de masque IP
<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})$')">