Header Ads

Header ADS

Campo para contraseña (input password) similar al iPhone, con Mootools



Al momento de escribir en los campos para contraseñas en el iPhone ó iPod Touch, los caracteres escritos van cambiando a otro con el fin de mantener la privacidad. Este efecto se puede conseguir en nuestras páginas web con la ayuda de distintas librerías JavaScript(como por ejemplo jQuery). En esta ocasión mencionaremos como lograrlo con Mootools.
Se trata de un plugin para Mootools llamado PassShark. Entre sus características encontramos:
  • Escrito en Mootools. Requiere -Core v. 1.2.4+ y -More 1.2.4.2+ 
  • Probado sobre Safari 3+, Firefox 3+, Opera 10+, IE 6 y 7
  • No necesitas modificar la estructura HTML. Los campos de contraseñas son encontramos automaticamento segíun el atributo type=password
  • No obstructivo: Con JavaScript desactivado el campo es totalmente funcional.
  • Soporta copiar y pegar

Uso básico:



<script type="text/javascript" charset="utf-8" src="Mootools-Core.js"></script>
<script type="text/javascript" charset="utf-8" src="Mootools-More.js"></script>
<script type="text/javascript" charset="utf-8" src="PassShark.js"></script>
<script type="text/javascript">
    window.addEvent('domready', function(){
        new PassShark('sample_pass',{
            interval: 200,
            duration: 2000,
            replacement: '%u25CF',
            debug: false
        });
    });
</script>

Mas información sobre dependencias, opciones y demo de este PassShark en PassShark - iPhone style password masking using MooTools.

No hay comentarios.

Con tecnología de Blogger.