Mascara de entrada de datos con Mootools

Mootools InputMask es un script que utiliza la biblioteca Javascript Mootools y que permite crear una máscara de entrada de datos; esto es por ejemplo, al ingresar un hora, sólo se escriben los números y el script se encarga de darle el formato de notación horaria adecuada.

Implementación

Primero hay que enlazar los archivos JS de Mootools y de la biblioteca en la sección HEADER del HTML de la página:

<script type="text/javascript" src="../mootools-core.js"></script>
<script type="text/javascript" src="mootools-more.js"></script>
<script type="text/javascript" src="InputMask.js"></script>

Luego inicializar el script también n la sección HEADER del HTML de la página:

<script type="text/javascript">
window.addEvent('domready', function(){
new InputMask.Time($('my1'));
new InputMask.Date($('my2'));
});
</script>

El código HTML del formulario para este ejemplo sería:

<div>
 <label style="width: 26%;">Enter a time <small>(HH:MM)</small></label>
 <input id="my1" name="myinput" type="text" value="" />
 </div>

 <div>
 <label style="width: 26%;">Enter a date <small>(MM/DD/YYYY)</small></label>
 <input id="my2" name="myinput" type="text" value="" />
 </div>

Eso es todo, muy sencillo ¿no?.

Mootools InputMask

Sitio: cpojer.net/blog/InputMask_Class_for_MooTools

Vía: scriptandstyle.com