Poniendo Mascaras a tus textbox

Cuantas veces te has topado con usuarios, que dicen que no funciona la página, que no se guardan los datos que introducen y en algunos casos, es porque no ponen los datos correctamente en los textbox.

Esto los puedes solucionar poniendo mascaras a tus textbox en los formularios.

¿Que son las mascaras?

Las mascaras es la manera de definir un patrón, para ese textbox que representa un campo.

Si en ese campo vas especificar un DNI, la mascara será 8 digitos, seguidos de una letra. Si vas a especificar un telefono, sera una cadena de 9 numeros.

Estas mascaras las puedes programar en javascript o en ajax, lo cual tiene un gran curro. Pero hay un librería, que aunque lleva algun tiempo sin actualizarse, la verdad, da muy buen resultado y es muy facil de implementar en tus textbox.

Se trata de la librería Masked Input Plugin. También necesitaras la librería Jquery, que va en el mismo zip

GitHub:Masked Input Plugin

Descarga: jquery.maskedinput-master.zip

Ejemplo practico

Primero de todo debes agregar las dos librerias, la maskedinputs.js y la jquery. Estas librerias las agregas en la cabecera de la pagina, entra la etiqueta <head></head>.

<script src="../lib/jquery-1.9.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/jquery.maskedinput.js" type="text/javascript"></script>

Una vez añadidas las librerias, vas poniendo mascaras a tus textbox. Esto lo hacemos indicando un patron, que se define en la cabecera de la pagina. Para ello declaras la siguiente funcion.

Definiendo Mascaras

<script type="text/javascript">
    $(function() {
        $.mask.definitions['~'] = "[+-]";
        $("#nombre").mask("aaaaaaaaaaaaaaaaaaaa",{placeholder:"aaaaaaaa",completed:function(){alert("completado");}});
        $("#fechanacimiento").mask("99/99/9999",{placeholder:"mm/dd/yyyy",completed:function(){alert("completado");}});
        $("#phone").mask(999-999-999");
        $("#dni").mask("99999999a");
        });
</script>
  • a – Representa letras (A-Z,a-z)
  • 9 – Representa cualquier numero (0-9)
  • * – Representa letras y numeros (A-Z,a-z,0-9)
  • ? – A partir de ahi ya no es obligatorio introducir mas datos para que la mascara este bien.
  • placeholder: Es el valor que haya dentro de la caja antes de introducir los datos.

Ahora vamos añadirle el codigo a nuestras cajas de texto para que las mascaras empiezen a funcionar.

Configurando los textbox

<table>
<tr><td>Nombre</td><td><input id="nombre" type="text" tabindex="1" /></td><td>aaaaaaaaaaaaaaaaaaaa</td></tr>
<tr><td>Fecha de nacimiento</td><td><input id="date" type="text" tabindex="2" /></td><td>99/99/9999</td></tr>
<tr><td>Telefono</td><td><input class="phone" type="text" tabindex="3"/></td><td>999-999-9999</td></tr>
<tr><td>DNI</td><td><input id="dni" type="text" tabindex="4"/></td><td>99999999a</td></tr>
</table>

Conclusion

Como ves, con esta libreria, te ahorras bastantes horas de programacion, ya que es muy facil de implementar. Son apenas 2 lineas de codigo, una para definir la mascara y la otra para el propio textbox.

Interacciones con los lectores

Deja una respuesta