Evitar la introducción de caracteres no numéricos en campos de texto con Javascript
18 de Diciembre 2008
Una buena forma de evitar errores del usuario al rellenar formularios, es no dar lugar a que se produzcan y uno de los casos en los que esto es posible, es el de los típicos formularios que solicitan un número de cuenta bancaria.
La siguiente función usada con el evento onkeydown en campos de texto, comprueba que el caracter introducido sea la tecla tabulador o delete, cualquier número del 0 al 9 en el teclado normal, cualquier número del 0 al 9 en el teclado numérico, la tecla control o F5.
function esValorNumerico(event){
if(!event) event = event || window.event;
return (
(event.keyCode > 7 && event.keyCode < 10) // delete (8) o tabulador (9)
|| (event.keyCode > 47 && event.keyCode < 60) // números del teclado
|| (event.keyCode > 95 && event.keyCode < 106) // números del teclado numérico
|| event.keyCode == 17 // Ctrl
|| event.keyCode == 116 // F5
)
}
Evitaríamos la introducción de cualquier caracter que no sea uno de los especificados, devolviendo false si la condición no se cumple.
inputs[i].onkeydown = function(event){
if(!esValorNumerico(event)) return false;
}
¿Por qué con el evento onkeydown y no con onkeypress?
Por suerte, onkeydown funciona igual en todos los navegadores. Onkeypress sin embargo, devuelve 0 como keyCode para las teclas especiales, entre las que se encuentran los números, además de presentar diferencias importantes de funcionamiento entre Internet Explorer y el resto de navegadores.
Por cierto, con este problemilla he tenido la ocasión de comprobar que los códigos que se pueden encontrar por Internet para realizar esta acción son bastante prehistóricos (optimizados para Netscape 4). ¿Tendrán algo que ver los frameworks Javascript…?
