|
||||
|
|
|
|
|
|
|
|||
|
|
|||
|
||||
Home - HTMLWebScript - Formularios
Script anula teclas I
por Luciano Moreno, del departamento de diseño web de BJS Software.
Durante el proceso de construcción de un sitio web frecuentemente nos encontramos con el problema de crear, en un formulario, una caja de texto que sólo admita la entrada por parte del usuario de un cierto conjunto de caracteres.
Este es el caso, por ejemplo, de una caja de texto para introducir números de teléfono (que sólo deben admitir números) o de una caja que no admita espacios en blanco, comillas, etc.
Indudablemente se puede construir un código JavaScript concreto para cada uno de estos casos, o proceder a una validación de los datos una vez se va a enviar el formulario. Pero creo que es más útil una función genérica que sirva para cualquier caso concreto, y que además valide estos datos antes del envío de los mismos, evitando así al usuario las incómodas cajas de alerta advirtiéndole de los errores.
El siguiente script utiliza una matriz de caracteres permitidos y usa el evento KEYPRESS para activar la función, con lo que si el usuario intenta pulsar la tecla correspondiente a un caracter no permitido, ni siquiera este aparecerá en la caja, es decir, será como si no lo hubiera pulsado.
El código completo es el que sigue:
<html>
<head>
<title>Script
para autorizar solo caracteres predeterminados en una caja de
texto</title>
<script
language="JavaScript">
/**
* script para permitir al usuario introducir en una
caja de texto solo caracteres predefinidos
*Autor Luciano Moreno (
http://www.terra.es/personal6/morenocerro2/
)
*/
/**
* var global correctos >> matriz que contiene los caracters permitidos al
usuario
*/
var correctos = new
Array("a","b","c","A","B","C")
/***
* var global
estado >> variable booleana, true si el caracter
introducido es correcto y false en caso
contrario
* var global codigoTecla
>> valor ASCII de la tacla pulsada para cada navegador (son
diferentes)
* var global cadenaTecla
>> cadena que representa a la tecla pulsada (igual para todos los
navegadores)
*/
var
estado=false;
var codigoTecla,
cadenaTecla;
/**
* function pulsada >> funcion principal >> comprueba la tecla
pulsada y la escribe o no
* si es
correcta >> retorna true al manejador
de eventos de la caja de texto >> se escribe el
caracter
* si es incorrecta
>> retorna false al manejador de eventos de la caja de texto
>> no se escribe el caracter
*/
function
pulsada(e)
{
estado=false
if(document.all)
{
codigoTecla =
event.keyCode
cadenaTecla =
(String.fromCharCode(event.keyCode));
}
else
if(document.layers)
{
codigoTecla =
e.which
cadenaTecla =
String.fromCharCode(e.which);
}
else
if(document.getElementById)
{
codigoTecla = (window.Event) ? e.which :
e.keyCode;
cadenaTecla=(String.fromCharCode(codigoTecla));
}
for(i=0;i<correctos.length;i++)
{
if(cadenaTecla==correctos[i])
estado=true;
}
if(estado==false)
{
if(document.all)
event.returnValue =
false;
else
return false;
}
}
/**
* fin del
script
*/
</script>
</head>
<body>
<form
name="formulario">
<input type="text" name="nombre"
onkeypress="return pulsada(event)">
</form>
</body>
</html>
La función pulsada() captura el evento, determina el código ASCII correspondiente a la tecla pulsada y lo pasa a su caracter equivalente, sea cual sea el idioma del teclado. Luego lo compara con los caracteres permitidos, que se encuentran dentro de la matriz inicial correctos, y si no coincide con ninguno de ellos retorna false, con lo que se anula la acción de pulsado de tecla, invalidándola.
Mencionar que debemos usar tres formas de la función diferentes, una para cada navegador, ya que cada uno de ellos captura el evento de forma diferente, al igual que anulan el pulsado de la tecla de forma también diferente.
El resultado de este código podéis verlo pinchando aquí.
Si tenéis alguna duda, escribidnos.
Home - HTMLWebScript - Formularios