[Tip] - JQuery Masked Input Plugin + ASP.NET
 | Hola, que tal? otra vez voy a escribir sobre un Plugin que les puede servir mucho para sus desarrollos, especialmente en ASP.NET Web Forms, en donde mientras más podemos evitar los postback para validaciones simples, mucho mejor. Si bien hay un control MaskedEdit en el Ajax Control Toolkit, es posible que no queramos incluir esta DLL para solo tener la funcionalidad de la máscara, o que quieras utilizarlo por ejemplo con ASP.NET MVC o PHP. El plugin del que hablo es JQuery Masked Input de digitalbush.com. Si bien, hay varios plugins que hacen lo mismo, me llamó la atención este por su simpleza de uso. |
Este plugin ha sido testeado con IE 6/7/8/9 , Firefox 1.5/2/3x, Safari, Chrome y Opera, por lo que nos da seguridad que funcionará para la mayoría de los usuarios. Las máscaras predefinidas son:
- a – Representa una letra (A-Z,a-z)
- 9 – Representa un número (0-9)
- * - Representa una letra o número(A-Z,a-z,0-9)
Se está trabajando para dar soporte a más símbolos para las máscaras, pero por mientras, esto ya nos sirve bastante.
Para utilizarlo, primero debemos incluir los Script, puedes bajar los archivos desde aquí, entonces los agregamos a nuestra Web Form.
<script type="text/javascript"
src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.min.js">
</script>
<script src="js/jquery.maskedinput-1.2.2.js"type="text/javascript"></script>
Para el ejemplo, agregué los siguientes campos:
Ahora el código que asocia el plugin con los campos de texto:
<script type="text/javascript">
jQuery(function($) {
$("#TxFecha").mask("99/99/9999");
$("#TxFono").mask("(999) 999-9999");
$("#TxPatente").mask("aaaa-99");
$("#TxNumeros").mask("999.999");
$("#TxLetras").mask("aaaa");
});
</script>
Me gustó la opción de que si no estamos conforme con el clásico símbolo “_” para la mascara, entonces fácilmente podemos reemplazarla, por ejemplo con “*”, que se ve horriblemente feo:
$("#TxFecha").mask("99/99/9999",{ placeholder: "*"});
Sin embargo podemos también dejar vacío el atributo placeholder
$("#TxFecha").mask("99/99/9999",{ placeholder: " "});
Además se pueden definir nuestras propias definiciones de máscaras, por ejemplo, permitir el signo “+” o “-"
$.mask.definitions['~'] = '[+-]';
$("#TxNumeros").mask("~999.999");
| Como ven, algo sencillo, si bien creo que de todos modos le falta un poco de maduración, como el tema de pasar como argumento una función para cuando se completa el llenado del input según la máscara, que lo estuve probando pero no tuve resultados, sin embargo, con lo que vimos, podemos lograr buenos resultados |
Espero que les sirva!!
Gonzalo