Enmascarar (MaskEdit) cajas de texto con jQuery
Desde digitalbush.com me encuentro con este plugin para jQuery, donde nos permite enmascarar (maskedit) nuestras cajas de texto (input type=”text”), como se ve en la imagen. De esta manera mejoramos la usabilidad de nuestros formularios. Para tal fin necesitaremos descargar la librería jQuery desde su sitio oficial y el plugin mensionado anteriormente.
El próximo paso sería incluir entre las etiquetas <head> </head> ambos archivos js de esta forma:
<script src="jquery.min.js" type="text/javascript"></script> <script src="jquery.maskedinput.js" type="text/javascript"></script>
El código HTML de las cajas de texto, debería quedarnos algo como esto:
<label>Fecha ("99/99/999") </label><input id="fecha" type="text" name="date" />;
<label>Telefono ("(999) 999-9999") </label><input id="telefono" type="text" name="telefono" />;
<label>C&amp;oacute;digo ("99-9999999") </label><input id="codigo" type="text" name="codigo" />
<label> Nro. Serie ("aa*-99-9999") </label><input id="serial" type="text" name="serial" />
y ahora algo de jQuery para enmascarar nuestros inputs:
<script type="text/javascript">
jQuery(function($){
$("#fecha").mask("99/99/9999");
$("#telefono").mask("(999) 999-9999");
$("#codigo").mask("99-9999999");
$("#serial").mask("aa*-99-9999");
});
</script>
Como vemos en el código anterior podemos validar lo que el usuario ingresará en los inputs, para lo cual tenemos las siguientes notaciones:
- a representa los caracteres alfabeticos (A-Z, a-z)
- 9 representa el ingreso de datos numéricos (0-9)
- * representa datos alfanuméricos (A-Z,a-z,0-9)
Si por algun motivo no estamos conformes con el marcador de posicion (“_”) lo podemos cambiar de esta manera:
jQuery(function($){
$("#fecha").mask("99/99/9999",{placeholder:" "});
});
Si deseamos ejecutar una función una vez que la máscara se ha completado, hacemos esto:
jQuery(function($){
$("#fecha").mask("99/99/9999",{completed:function(){alert("Se ha completado la carga: "+this.val());}});
});
O porque no crear nuestra propia mascara:
jQuery(function($){
$.mask.definitions['~']='[+-]';
$("#propiamascara").mask("~9.99 ~9.99 999");
});
des esta manera donde tengamos ‘~’ solo nos permitirá ingresar ‘+’ y ‘-’.
Bueno, espero les sirva y ayude en sus proyectos. Como siempre Demo y Codigo de Descarga.
También te puede Interesar
¿Disfrutaste esta entrada? Por qué no dejas un comentario abajo y continúas la conversación, o te suscribes a mi feed y obtienes artículos como este enviados a tu lector de feeds.
Comentarios
Genial, justo lo que andaba buscando, muchas gracias, todo tu blog en general ha sido de gran ayuda.
Gracias por su aporte, pero quiero saber si este plugin trabaja en paginas que usan master pages en asp.net?
hermano saludos desde venezula soy nuevo en este mundo de la programacion y me gustaria si no es de mucha molestia q me explicaran como hacer q esto funcione desde el medio de dreanweaver saludos
El Artículo está interesante. Trabajando con este plugin, tengo el problema de que si el input tiene un valor por defecto, al aplicarle la mascara no lo muestra, es decir siempre blanquea en input cuando se renderiza el formulario
Alguna sugerencia?
Gracias