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 creé un programa que necesitaba usar este aspecto. en Internet, pero usarlos suenan muy mal, así que tuve que implementar uno yo mismo.
Primero implemente dos funciones para operar el cursor:
Copie el código de código de la siguiente manera:
// Obtener la posición actual del cursor de un control de cuadro de texto
función obtenerPos(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 un control de cuadro de texto
función establecerCursor(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
Copie el código de código de la siguiente manera:
// Sello de procesamiento tradicional
ventana.event.returnvalue = falso;
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. .
Copie el código de código de la siguiente manera:
// Maneja el botón tú mismo
cambiar(nKeyCode)
{
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.
Copie el código de código de la siguiente manera:
si (strText.match(expMask))
{
//El formato de entrada es correcto
objTextBox.value = strText;
}
Finalmente mueva el cursor a la ubicación adecuada.
// mueve 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.
Copie el código de código de la siguiente manera:
//Controla la representación OBJ según la expresión regular especificada
máscara de función (objTextBox, máscara)
{
//mascarilla
expMask = nueva RegExp(máscara);
//El texto en el cuadro de texto actual
var strText =objTextBox.valor;
// longitud del texto
var nTextLen=strText.length;
//Posición actual del cursor
var nCursorPos=getPos(objTextBox);
//código clave presionado
var nKeyCode = ventana.event.keyCode;
if (nKeyCode > 95) nKeyCode -= (95-47);
// Sello de procesamiento tradicional
ventana.event.returnvalue = falso;
// Maneja el botón tú mismo
cambiar(nKeyCode)
{
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;
}
// mueve el cursor
setCursor(objTextBox,nCursorPos);
}
// Obtener la posición actual del cursor de un control de cuadro de texto
función obtenerPos(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 un control de cuadro de texto
función establecerCursor(obj,num){
rango=obj.createTextRange();
range.collapse (verdadero);
range.moveStart('carácter',num);
rango.select();
}
Cómo utilizar:
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 usar un cuadro de máscara de fecha y hora
Copie el código de código de la siguiente manera:
<nombre de entrada=i_etmend tipo=text id=i_etmend valor={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}))$')>
Para utilizar el cuadro de máscara IP
Copie el código de código de la siguiente manera:
<nombre de entrada=tipo i_bip=id de texto=valor i_bip={I_BIP} longitud máxima=15 onkeydown=máscara(i_bip, '^([0-9]{0,3}[/.][0-9]{0, 3}[/.][0-9]{0,3}[/.][0-9]{0,3})$')>