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. J'ai récemment créé un programme qui devait utiliser cet aspect. J'ai trouvé le programme correspondant. sur Internet, mais en les utilisant, ils sonnent tous très mal, j'ai donc dû en implémenter un moi-même.
Implémentez d’abord deux fonctions pour faire fonctionner le curseur :
Copiez le code comme suit :
// Récupère la position actuelle du curseur d'un contrôle de zone de texte
fonction 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'un contrôle de zone de texte
fonction 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
Copiez le code comme suit :
// Sceller le traitement traditionnel
window.event.returnvalue = faux ;
Traitez ensuite 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. .
Copiez le code comme suit :
// Gérez le bouton vous-même
commutateur (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;
}
}
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.
Copiez le code comme suit :
si (strText.match(expMask))
{
//Le format d'entrée est correct
objTextBox.value = strText;
}
Enfin, déplacez le curseur à l'emplacement approprié.
// déplace 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.
Copiez le code comme suit :
// Contrôler la représentation OBJ basée sur l'expression régulière spécifiée
masque de fonction (objTextBox, masque)
{
//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 touche enfoncé
var nKeyCode = window.event.keyCode;
si (nKeyCode > 95) nKeyCode -= (95-47) ;
// Sceller le traitement traditionnel
window.event.returnvalue = faux ;
// Gérez le bouton vous-même
commutateur (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éplace le curseur
setCursor(objTextBox,nCursorPos);
}
// Récupère la position actuelle du curseur d'un contrôle de zone de texte
fonction 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'un contrôle de zone de texte
fonction setCursor(obj,num){
range=obj.createTextRange();
range.collapse(true);
range.moveStart('caractère',num);
range.select();
}
Comment utiliser :
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
Copiez le code comme suit :
<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
Copiez le code comme suit :
<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})$')>