jQuery Mask Plugin

jQuery Mask es un plugin jQuery que nos permite enmascarar los campos de texto de nuestros formularios. Permite a un usuario introducir con más facilidad el formato deseado para cada campo, como por ejemplo: fechas, teléfonos, códigos postales, etc.

Su implementación es muy sencilla. Debes descargar el plugin e incluirlo en el <head> de vuestra página junto con la librería jQuery.

<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="jquery.mask.js"></script>
<script type="text/javascript">
$(document).ready(function(){
      $('.date').mask('11/11/1111');
});
</script>

En este caso solo vamos a ver la enmascaración de un campo el que se va a escribir una fecha con el siguiente formato: «11/11/1111», el cual se lo estamos indicando en la llamada al plugin.

En el <body> tendremos nuestro input como se suele hacer pero añadiéndole un class.

Fecha: <input type="text" name="fecha" class="date" />

El usuario escribirá en este campo y si no escribe números, borra lo escrito hasta que no escriba el patrón de números que se indica como parámetro al plugin.

Ver más ejemplos en funcionamiento

Descargar plugin

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(7 votos, promedio: 5 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

8 respuestas a “jQuery Mask Plugin”

  1. Marcelo dice:

    No funciona con jquery 3.0.0 asia delante

  2. Bernardo Dala dice:

    nao funciona

  3. Pablo dice:

    No funciona con jquery 3.1.1

  4. ALEXANDER DIAZ dice:

    NECESITO UNA MASCARA PARA UN INPUT QUE ME ACEPTE SOLO LAS LETRAS «V» Y «J», me podrías apoyar con eso? Gracias de antemano.

  5. Glori dice:

    Excelente me sirvió de mucho Gracias

  6. Rodolfo B dice:

    Que tal José.

    Como haces para que una mascara de una input text solor se pueda ingresar un nro entero que puede ir del 0 al 99999

    En el ejemplo que tenes en esta pagina se puede cargar nros con yo lo necesito, pero consigura la mask y me obliga a ingresar la totalidad de los numeros definidos en la mask. En tu ejemplo no pasa eso.

    • Jose Aguilar dice:

      Hola,

      En el ejemplo en funcionamiento el ejemplo de número lo estamos llamando así:

      $(‘.money’).mask(‘000.000.000.000.000,00’, {reverse: true});

      Saludos

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre