A Editar enmascarado en JavaScript

Intenta escribir un número de seguro social válido en una caja de texto, y una aplicación que se puede evitar de hacer que los desarrolladores a menudo crean controles "enmascarados" que requieren los usuarios introducir datos utilizando un formato específico. JavaScript no tiene una función de control de edición de máscaras, pero se puede construir su propio uso de una poderosa tecnología de texto a juego llamado expresiones regulares.

Desencadenando eventos

A medida que los visitantes del sitio introducir caracteres en un teclado, desencadenan eventos que reconocen los ordenadores. Escriba la letra "Y" en un cuadro de texto, por ejemplo, y se produce un evento "onkeypress". Puede agregar un controlador de eventos a un cuadro de texto colocando el código siguiente en la sección guión de su documento HTML:

window.onload = function () {
document.getElementById ( "textBox1"). onkeypress = function () {
checkInput (evento);
}
}

Este código llama a una función llamada checkInput cuando un navegador carga las páginas Web. Agregar un cuadro de texto a la sección del cuerpo del documento como se muestra en el siguiente ejemplo:

<Input type = "text" id = "textBox1" />

La captura de pulsaciones de teclas

Los diferentes navegadores tienen diferentes maneras de identificar las pulsaciones de teclado. Se puede determinar el valor de una tecla presionada mediante la adición de la siguiente función JavaScript para el guión de la sección de su documento:

función checkInput (KeyEvent) {
numericalKeyValue var;

si (keyEvent.which) {
numericalKeyValue = keyEvent.which;
}

else if (window.event)
{
numericalKeyValue = keyEvent.keyCode;
}
}

Esta función almacena el valor numérico de la tecla pulsada en la variable llamada numericalKeyValue. Ahora sólo hay que verificar que la tecla pulsada es una de las claves que desea permitir.

entrada de validación de

Al crear un control de entrada enmascarada, usted probablemente sabe que los personajes que desea permitir a los usuarios introducir. Se pueden definir los caracteres de pegar el siguiente código al final de la función checkInput antes del paréntesis de cierre:

validCharacters var = / [0-6] /;
var = characterKeyValue String.fromCharCode (numericalKeyValue);
var = isValid validCharacters.test (characterKeyValue);
volver isValid;

La primera instrucción crea una expresión regular que define el rango de caracteres que desea permitir. El segundo comando convierte el valor de la clave numérica en un personaje. La siguiente línea establece el valor de isValid a "verdadero" o "falso" en función de si la tecla pulsada es válida. Al guardar el documento y verlo en un navegador, que sólo será capaz de escribir los dígitos de 0 a 6 en el cuadro de texto enmascarado.

Otras expresiones regulares

Una vez que aprenda expresiones regulares adicionales, puede crear cualquier tipo de control de edición con máscara que tiene gusto cambiando el valor de la variable validCharacters. Establecer su valor en / [ae] /, por ejemplo, y la entrada de los límites de la máscara a las letras minúsculas a través de un correo. Establecer el valor de / p / restringe la entrada a la letra p. Este ejemplo simplemente evita que los usuarios escribir caracteres no válidos en un cuadro de texto. También podría modificar el código para que muestre un mensaje de "entrada no válida" cuando los usuarios escriben los caracteres incorrectos. Esto proporciona una valiosa retroalimentación y garantiza a los usuarios de que su aplicación no está roto. Visitar un sitio web que ofrece un servicio gratuito-expresiones regulares tutoriales para más información.