javascript: controlar entrada de datos en caja de texto (este si que funciona en chrome, firefox y explorer)

Con este código se valida lo que va tecleando el usuario en un cuadro de texto o un textarea. Puede validarse que solo escriban números, solo letras, números y letras, determinados caracteres…

Primero veremos el código (con la posibilidad de ver el ejemplo funcionando) y comentaremos el significado y funcionamiento de algunas líneas. Más adelante pondremos varias modificaciones del código original para que se adapte a lo que necesitemos en determinado momento

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Validar entrada de datos</title>
<script type="text/javascript">
function validar(e) { // 1
    tecla = (document.all) ? e.keyCode : e.which; // 2
    if (tecla==8) return true; // 3
    patron =/[A-Za-z\s]/; // 4
    te = String.fromCharCode(tecla); // 5
    return patron.test(te); // 6
}
</script>
</head>

<body>
<p><input type="text" name="textfield" onkeypress="return validar(event)" /><br />
<textarea rows="5" cols="20" onkeypress="return validar(event)"></textarea></p>
</body>
</html>

Ver ejemplo

A continuación la explicación de las líneas de código que aparecen numeradas:

1- A la función se le pasa el objeto event

2- Aquí hay que distinguir si el navegador es Internet Explorer (IE) document.all u otro, porque ya os habreis dado cuenta que no todos los navegadores son iguales. Si el navegador es IE se asigna a la variable tecla el valor de e.keyCode, en caso contrario se asigna el valor de e.which. En los dos casos se obtiene el valor ASCII de la tecla pulsada.

3- En esta línea se comprueba si es la tecla pulsada es la tecla de retroceso y en ese caso la función termina (retorna). De esta forma se permite borrar caracteres.

4- Aquí se pone la expresión regular que permite validar si se admite o no la pulsación. En el ejemplo se admiten letras mayúsculas A-Z, letras minúsculas a-z y el espacio \s

5- Se pasa el valor ASCII de la variable tecla a su carácter correspondiente

6- Si el carácter coincide con el patrón, la función devuelve true, si no coincide devuelve false.

Ahora vamos a ver varias expresiones regulares para distintas validaciones. Sustituye la línea 4 por la que necesites:

patron = /\d/; // Solo acepta números
patron = /\w/; // Acepta números y letras
patron = /\D/; // No acepta números
patron =/[A-Za-zñÑ\s]/; // igual que el ejemplo, pero acepta también las letras ñ y Ñ

También se puede hacer un patrón que acepte determinados caracteres, poniendolos entre corchetes. Veamos un ejemplo para validar que solo se acepte a, j, t, 6 y 9:

patron = /[ajt69]/;

O el caso contrario, queremos aceptar cualquier caracter, menos alguno. Los que no nos sirven se ponen en el patron y se cambia un poco el código de la función que usamos para validar

patron =/[javierb]/; // 4
te = String.fromCharCode(tecla); // 5
return !patron.test(te); // 6

Fuente: http://www.telefonica.net/web2/blas-mar/validarformu.html

Anuncios

12 comentarios sobre “javascript: controlar entrada de datos en caja de texto (este si que funciona en chrome, firefox y explorer)

  1. Y si quiero que solo acepte cierta cantidad de letras o de numeros.
    ¿Que debo hacer?… pues he agregado a la expresion regular ha qedado
    / [0-9]{8} /
    pero no funciona.

    1. si por ejemplo quieres que solo se puedan introducir 10 caracteres solo tienes que añadirle la propiedad size al input asi: input name=”textfield” type=”text” id=”textfield” size=”10″

      espero haberte sido de ayuda

      un saludo

  2. Hola yo lo estoy usando en un formulario con un textarea y lo tengo así:

    La idea es que deje introducir solo números, pero no deja hacer intro para escribir en la siguiente linea, solo deja escribir números pero no deja presionar intro. Como podría habilitar la tecla intro?

  3. hola Daniel

    fijate en el punto 3

    3- En esta línea se comprueba si es la tecla pulsada es la tecla de retroceso y en ese caso la función termina (retorna). De esta forma se permite borrar caracteres.

    if (tecla==8) return true; // 3

    donde el codigo 8 pertenece a la tecla borrar, me imagino que tendras que añadir otro if con el codigo de la tecla intro que no tengo ni la mas remota idea de cual es, preguntale al señor google

    espeor que te funcione y haberte servido de ayuda xDD

  4. 2 años desde el ultimo comentario… da igual… en la universidad mi profesor dijo que las inyecciones SQL se podían mitigar eliminando la comilla simple del input.. asi que seguí tu lógica y calzo correctamente con lo que buscaba… te lo agradezco aunque ya hayan pasado unos años xD

  5. Hola y gracias por el artículo, me fue muy útil.
    Mi problema es permitir solo letras o sea [a-z] en firefox y safari anda de 10 pero en chrome me deja pasar tildes!, Sabes como puedo hacer para que chrome no permita las tildes?

    1. perdón me olvide de poner el codigo concreto:
      var result = /^[\wñ]$/i.test(String.fromCharCode(key));
      if (!result) {
      Event.stop(event);
      }

      1. Buenas Farabundo

        Me pilla un poco oxidado esta entrada, me suena que tuve un problema parecido pero ya hace tiempo de eso … y si pruebas a decirle que solo acepte letras y numeros poniendolo todo? es una solucion chapucilla pero por probar y evitarte mas quebraderos de cabeza … es decir:

        – patron = /[ajt69]/; –> usando esto que en teoria es solo para permitir estos caracteres pero poniendo todo el abecedario y numeros

        se que es una solucion muy chapuzas pero a estas horas de la noche y con esta entrada ya tan lejana ahora mismo es lo unico que se me ocurre

        ya me contaras si pruebas esto o das con otra cosa que seguro que la hay y con muchisimo mejor resultado

        a mi me suena tener una funcion muy enorme de javascript por el tema de los acentos, tendria que buscarla en el baul de los recuerdos y este tiene mucha profundidad pero si no das con la solucion avisame

        siento no haber sido de mucha ayuda, suerte!

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s