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:

EntradasRelacionados

4 Tips de Oracle para iniciarte en el mundo de la programación

Ventajas, desventajas y consejos al crear tu sitio web

<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?.