Prohibir ciertos caracteres en un input de texto

0Sebastian Barria • 7th Mar 2010 • HTML, Javascript, Web

Esta función hecha en javascript permite prohibir ingresar ciertos caracteres en un input de texto. En este caso específico, no deja ingresar caracteres que no sean números.

La escencia de la función es simple: recibe un evento; comprueba si es un número y devuelve una respuesta.

Sin  más preámbulo, la función es la siguiente:

function isNumber(e) {
    k = (document.all) ? e.keyCode : e.which;
    if (k==8 || k==0) return true;
    patron = /\d/;
    n = String.fromCharCode(k);
    return patron.test(n);
}

¿Cómo usarla?

Como decía anteriormente, esta función debe recibir un evento. En este caso es necesario llamarla desde la misma casilla de texto, de la siguiente manera:

<input type="text" onkeypress="return isNumber(event);" />

La manera en que estamos llamando a la función es a través del evento onkeypress. A este input se le pueden agregar todos los demás atributos que sean necesarios. Incluso es bueno definir el atributo maxlength para limitar la cantidad de caracteres que puede ingresar el usuario.

Como dato, la línea que consulta si k==8 o si k==0, lo hace para saber si la tecla presionada es el backspace (8) o las flechas, y delete (0), en cuyo caso retorna true, para autorizar que se tecleen.

Como modificar/ampliar esta función

Si se fijan, hay una línea que dice:

patron = /\d/;

Esta línea define el patrón a buscar. Es decir, que si el caracter ingresado (tecla presionada) está dentro de esta gama de caracteres, está autorizada a ser escrita en la casilla de texto. De otra forma, no se puede ingresar el caracter.

Otras posibilidades de patrones son las siguientes:

/\w/ = Permite cualquier caracter alfanumérico, incluyendo el guión bajo (_). Es equivalente a [a-zA-Z0-9_].

/\W/ = Permite cualquier caracter que NO sea alfanumérico. Equivalente a [^a-zA-Z0-9_].

/\D/ = Permite cualquier número que NO sea un número. Equivalente a [^0-9].

[xyz] = permite cualquier caracter x, y o z.

[0-9] = permite cualquier número entre 0 y 9.

[a-z] = permite cualquier letra entre a y z (minúsculas).

[^a-k] = permite cualquier letra que NO esté entre a y k (minúsculas).

Existen muchas otras posibilidades de patrones, que corresponden a expresiones regulares en javascript.