Nuestro formador, Andrés Cayón, responsable entre otros de cursos como Dreamweaver CS4 Novedades, junto con Mariana Cabral y, del próximo lanzamiento de video2brain, Adobe Fireworks CS4 Básico, nos envía este consejo, para validar sólo números en JavaScript.
A veces puede sernos útil conseguir que el usuario sólo pueda introducir ciertos caracteres en un campo de texto, por ejemplo, que sólo pueda introducir números para una entrada de teléfono.
Vía: zentolos, en flickr.com
Esta pequeña función se encarga de ello y utiliza 2 trucos. En el primer truco se pasa el evento (onkeypress) a la función mediante el uso de la palabra “event”, de manera que podemos capturar información sobre el evento. Añadiremos return para recibir el valor de vuelta (true si la tecla pulsada es un número o false en caso contrario).
<input type=”text” name=”telefono” id=”telefono” onkeypress=” return soloNumeros(event)” />
El nombre de la propiedad que captura la tecla pulsada es distinto en IE, que utiliza la palabra keyCode; mientras que el resto de navegadores llaman a este valor which.
Una vez pasado el evento como parámetro a la función (lo hemos llamado ‘evt’), comienza el segundo truco: Podemos acceder tranquilamente a sus propiedades como si fuera un objeto cualquiera. Como hemos dicho, la propiedad que nos interesa es which/keyCode, por lo que comprobaremos el navegador y asignaremos el valor a una variable (“la hemos llamado ‘keynum’):
function soloNumeros(evt){
if(window.event){// IE
keynum = evt.keyCode;
}else{
keynum = evt.which;
}
…
}
Finalmente sólo hay que comprobar si el valor entra dentro del rango de teclas numéricas: Cada tecla tiene un número que podemos comprobar en la siguiente URL. Podemos ver que los valores numéricos van del 48 al 57, así que sólo nos queda revisar si el valor numérico de la tecla pulsada se encuentra en dicho rango y devolver true o false.
El código completo de la función queda por tanto así:
function soloNumeros(evt){
//asignamos el valor de la tecla a keynum
if(window.event){// IE
keynum = evt.keyCode;
}else{
keynum = evt.which;
}
//comprobamos si se encuentra en el rango
if(keynum>47 && keynum<58){
return true;
}else{
return false;
}
}
Y la llamada desde el input sería:
<input type=”text” name=”telefono” id=”telefono” onkeypress=”return soloNumeros(event)” />
Andrés Cayón | Grupo de usuarios de Adobe Dreamweaver dwug
