Evitar la introducción de ciertos carácteres en input usando jQuery

¿No te ha pasado alguna vez que al poner un formulario o un input en tu página web ha habido algún carácter que no querías que se pudiese introducir? O por ejemplo en el campo de teléfono, ¿nunca has querido hacer que solo se puedan insertar números? Pues en el artículo de hoy vamos a ver como evitar la introducción de ciertos caracteres en un input usando jQuery y también alguna alternativa con elementos de HTML 5.

¿Por qué restringir los caracteres que se introducen en un input?

Como usuario, resulta molesto el hecho de que un input te deje insertar un tipo de datos que no es el correcto, ya que al enviar ese formulario y validarse nos mostrará un error y eso en el mejor de los casos, ya que algunos formularios no nos devuelven ningún tipo de error, aumentando así el desconcierto y la molestia de los usuarios que no saben qué es lo que está pasando o que están haciendo mal.

En la mayoría de los casos los usuarios suelen fallar al introducir algún dato que pedimos en los formularios porque no dejamos claro lo que queremos que introduzcan o porque permitimos que puedan rellenar ese campo con información o caracteres que no nos interesa.

Por esta razón tenemos que restringir que pueden introducir y que no en los diferentes campos de nuestros formularios. Veremos como restringirlos mediante jQuery y haciendo uso de algunos campos específicos de HTML 5.

¿Como evitar la introducción de ciertos caracteres en un input usando jQuery?

La forma más sencilla de restringir los campos es haciendo uso de los input que nos proporciona HTML 5. Algunos de los campos que más nos pueden interesar, ya que son los más comunes, son los siguientes:

– email (<input id=”email” type=”email” />): Con este input se valida automáticamente que el email introducido sea correcto. En caso de no ser correcto nos mostrará un mensaje indicándonos que insertemos un valor válido.

– number (<input id=»num» name=»num» type=»number» />): Con este campo solo se permite introducir caracteres numéricos, no letras. Tiene unos atributos que le permiten introducir valores mínimos y máximos. Con los atributos máximo y mínimo quedaría de la siguiente forma (<input id=»tel» name=»tel» type=»number» max=»100″ min=»10″ />).

– tel (<input type=»tel» id=»phone» name=»phone» pattern=»(\+34|0034|34)?[ -]*(6|7)[ -]*([0-9][ -]*){8}» />): Con este campo podemos introducir y validar números. Lo mejor de este campo es que en el atributo pattern podemos especificar qué patrón queremos que tenga el número que se introduzca. Si quieres saber con exactitud qué significa el patrón del ejemplo y saber cómo validar también números fijos puedes echarle un vistazo a este artículo.

Ahora que hemos visto cómo restringir algunos caracteres con los nuevos elementos que nos proporciona HTML 5. vamos a ver como restringirlos haciendo uso de jQuery. Lo primero y más importante es incluir la librería de jQuery a nuestra web, sin esto no podremos hacer uso de jQuery y no podremos restringir lo que se introduce en los inputs.

Un ejemplo que vamos a ver es para permitir que solo se inserte caracteres numéricos. Lo primero que tenemos que tener es, evidentemente, un input. En este caso sería el siguiente:

<input type=”text” id=”numTel” class=”campoTel” />

Una vez tenemos el campo vamos a hacer crear un script con la siguiente función:

jQuery(document).ready(function()

{

   jQuery(‘.campoTel’).keypress(function(tecla)

   {

      if(tecla.charCode < 48 || tecla.charCode > 57)

      {

         return false;

      }

   });

});

Lo que hace este código es comprobar cada vez que se pulsa una tecla cuál es la que se pulsa. Si se pulsa una tecla que no sea un número (los números del 0 al 9 están comprendidos entre los códigos 48 y 57) no se realizará ninguna acción en el input, es decir, no se escribirá nada. Solo se escribirá si se pulsan los números del 0 al 9.

Hay muchos más códigos para poder restringir aún más los inputs, por ejemplo si solo queremos que se inserten minúsculas, o no permitir que se inserte la letra ñ, etc.

Conclusión

Como puedes ver de una forma sencilla podemos restringir qué tipo de caracteres queremos que se introduzcan en los diferentes campos de los formularios de nuestra web y de esta forma evitar que los usuarios que visiten nuestra página introduzcan información errónea.

Os hemos enseñado dos formas diferentes de restringir los campos, con jQuery y con los nuevos elementos que nos proporciona HTML 5. Esperamos que os haya resultado útil este artículo, puedes comentarnos si te ha servido, qué método de los dos has usado o si has tenido algún problema a la hora de probarlos.

También puedes contarnos si usas otros métodos para restringir los inputs y de esta forma ayudar a todas aquellas personas que visiten el artículo.

¿Te ha gustado el artículo?