Ingresar fecha, hora, dirección IP, etc. en una página web requiere ciertas restricciones de formato; de lo contrario, será difícil para el programa comunicarse con el programa.
Recientemente, estaba trabajando en un programa que necesitaba usar este aspecto. Encontré los programas correspondientes en Internet, pero eran muy complicados de usar, así que tuve que implementar uno yo mismo.
Primero implemente dos funciones para operar el cursor:
// Obtener la posición actual del cursor de una función de control de cuadro de texto getPos(obj)
{
obj.enfoque();
var workRange=document.selection.createRange();
obj.select();
var allRange=document.selection.createRange();
workRange.setEndPoint("StartToStart",allRange);
var len=workRange.text.length;
workRange.collapse (falso);
rango de trabajo.select();
devolver len;
}
//Establece la posición actual del cursor de una función de control de cuadro de texto setCursor(obj,num){
rango=obj.createTextRange();
range.collapse (verdadero);
range.moveStart('carácter',num);
rango.select();
}
La idea principal de la implementación de la función principal es realizar algunas operaciones cuando se presiona el teclado, que diseñé en el evento OnKeyDown.
En OnKeyDown, primero proteja el procesamiento de teclado predeterminado del sistema
// selle el procesamiento tradicional window.event.returnValue = false
y luego procese los mensajes de teclado correspondientes que deben procesarse;
Simplemente procese algunas cosas necesarias aquí, porque el cuadro de texto en sí no requiere demasiadas operaciones del usuario, así que mueva el cursor hacia adelante, retroceda y elimine las operaciones, para que su cuadro de texto tenga funciones básicas. La operación es muy fluida ahora. .
// Maneja el interruptor de botón (nKeyCode) tú mismo
{
caso 8:// si la acción es retroceso[<-]
{
strText = strText.substr(0,nCursorPos-1) + strText.substr(nCursorPos, nTextLen-nCursorPos);
nCursorPos--;
romper;
}
caso 46:// si la acción es del[del]
{
strText = strText.substr(0,nCursorPos) + strText.substr(nCursorPos+1,nTextLen-nCursorPos-1);
nCursorPos--;
romper;
}
case 38:// Si la acción es la tecla de dirección [superior]
case 39:// Si la acción es la tecla de flecha [derecha]
{
nCursorPos++;
romper;
}
case 37:// Si la acción es la tecla de flecha [izquierda]
caso 40:// Si la acción es la tecla de dirección [abajo]
{
nCursorPos--;
romper;
}
por defecto :
{
strText = strText.substr(0,nCursorPos) + String.fromCharCode(nKeyCode) + strText.substr(nCursorPos,nTextLen);
nCursorPos++;
si (nCursorPos>strText.length)
{
nCursorPos=strText.length;
}
romper;
}
}
Cualquier otro mensaje agregará un carácter. Se agregarán caracteres visibles e invisibles y el cursor retrocederá. Consulte la sección de manejo predeterminado más arriba.
Luego determine si la máscara es correcta. Si es correcta, entonces la entrada es legal y la visualización del valor se agrega al cuadro de texto.
si (strText.match(expMask))
{
//El formato de entrada es correcto objTextBox.value = strText;
}
Finalmente mueva el cursor a la ubicación adecuada.
//Mover el cursor setCursor(objTextBox,nCursorPos);
¡Finalizar!
El objetivo principal es reemplazar los mensajes del teclado del sistema con su propio procesamiento y bloquear los mensajes del sistema, para que pueda obtener el máximo control.
De esta forma nace un TEXTBOX que restringe el formato de la expresión regular especificada.
Adjunto el código completo:
// Según la expresión regular especificada, controla la función de representación OBJ mask(objTextBox,mask)
{
//Máscara expMask = new RegExp(máscara);
//El texto en el cuadro de texto actual var strText =objTextBox.value;
// Longitud del texto var nTextLen=strText.length;
// Posición actual del cursor var nCursorPos=getPos(objTextBox);
// Código de tecla presionada var nKeyCode = window.event.keyCode;
if (nKeyCode > 95) nKeyCode -= (95-47);
// Sellar el procesamiento tradicional window.event.returnValue = false;
// Maneja el interruptor de botón (nKeyCode) tú mismo
{
caso 8:// si la acción es retroceso[<-]
{
strText = strText.substr(0,nCursorPos-1) + strText.substr(nCursorPos, nTextLen-nCursorPos);
nCursorPos--;
romper;
}
caso 46:// si la acción es del[del]
{
strText = strText.substr(0,nCursorPos) + strText.substr(nCursorPos+1,nTextLen-nCursorPos-1);
nCursorPos--;
romper;
}
case 38:// Si la acción es la tecla de dirección [superior]
case 39:// Si la acción es la tecla de flecha [derecha]
{
nCursorPos++;
romper;
}
case 37:// Si la acción es la tecla de flecha [izquierda]
caso 40:// Si la acción es la tecla de dirección [abajo]
{
nCursorPos--;
romper;
}
por defecto :
{
strText = strText.substr(0,nCursorPos) + String.fromCharCode(nKeyCode) + strText.substr(nCursorPos,nTextLen);
nCursorPos++;
si (nCursorPos>strText.length)
{
nCursorPos=strText.length;
}
romper;
}
}
si (strText.match(expMask))
{
//El formato de entrada es correcto objTextBox.value = strText;
}
//Mover el cursor setCursor(objTextBox,nCursorPos);
}
// Obtener la posición actual del cursor de una función de control de cuadro de texto getPos(obj)
{
obj.enfoque();
var workRange=document.selection.createRange();
obj.select();
var allRange=document.selection.createRange();
workRange.setEndPoint("StartToStart",allRange);
var len=workRange.text.length;
workRange.collapse (falso);
rango de trabajo.select();
devolver len;
}
// Establece la posición actual del cursor de una función de control de cuadro de texto setCursor(obj,num){
rango=obj.createTextRange();
range.collapse (verdadero);
range.moveStart('carácter',núm.
range.select());
}
Uso:
1. Establezca el valor inicial predeterminado de formato indefinido. Por ejemplo: el valor inicial del formato de fecha y hora es "//::", que significa (año/mes/día hora:minuto:segundo). La IP es "..." (192.168.0.1). De hecho, simplemente establezca un carácter que no viole la expresión regular.
2. Llame a la función de máscara en el evento OnKeyDown del cuadro de TEXTO del formulario. El parámetro objTextBox es el nombre del cuadro de texto especificado. La máscara de parámetro es una máscara en formato de expresión regular.
Ejemplo:
para utilizar un cuadro de máscara de fecha y hora
<input name="i_etmend" type="text" id="i_etmend" value="{I_ETMEND}" maxlength="19" onkeydown="máscara(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}))$')">
Para usar el cuadro de máscara IP
<input nombre="i_bip" tipo="texto" id="i_bip" valor="{I_BIP}" maxlength="15" onkeydown="máscara(i_bip, '^([0-9]{0,3}[ .][0-9]{0,3}[.][0-9]{0,3}[.][0-9]{0,3})$')">