Micaela 17 de julio de 2009 a las 10.32
   Imprimir artículo
elWebmaster.com

jQuery: Optimizando el ingreso de contrase├▒as en tu sitio al estilo iPhone


jquery2Esconder la contraseña del usuario a medida que la ingresa es una mala práctica que reduce la confianza del usuario en lo que está tipeando y genera que los usuarios seleccionen palabras muy fáciles o copien y peguen las más complejas.

El encubrimiento de contraseñas se creó con el fin de evitar que la gente pueda ver la pantalla y conocer nuestra palabra secreta.  En esta nota te mostramos cómo emular el sistema por el que iPhone optó, con buenos resultados.

C├│mo maneja el iPhone el ingreso de contrase├▒as

El iPhone convierte el texto que ingresamos en asteriscos, como lo hacen los sitios web, pero lo hace luego de un r├ípido intervalo, cosa que nos permite visualizar los caracteres tipeados por un breve lapso de tiempo. El teclado del iPhone posee un popup a medida que presionamos cada car├ícter, lo que nos permite verificar visualmente qu├ę letra hemos tipeado.

Esta es una forma bastante buena y ├║til de manejar el ingreso de contrase├▒as, que puede ser transaladada al uso en sitios web. Este sistema es una combinaci├│n entre el otorgamiento de un mejor feedback al usuario y el aumento de la confianza del mismo, pero a la vez, se esconde mayoritariamente la contrase├▒a haciendo que sea dif├şcil para los “mirones casuales” conocer nuestra clave.

Podemos replicar esta idea, mediante jQuery.

Mostrar las teclas presionadas

Aqu├ş hay un markup formal muy simple con una entrada de contrase├▒a:

<form action="#" id="login-form-1">
  <div>
      <label for="user-password">Password</label>
      <input type="password" id="user-password" name="user-password" />
  </div>
</form>

Utilizamos el div interno para programar algo de posicionamiento relativo, y luego programar algo de estilo para un div especial que insertaremos para mostrar la tecla presionada.

#login-form-1 div {
   position: relative;
}
#login-form-1 div #letterViewer {
   display: none;
   position: absolute;
   left: 240px;
   top: -30px;
   width: 100px;
   font: bold 72px Helvetica, Sans-Serif;
}

Luego con jQuery, podemos añadir ese div y adjuntar un evento keypress en la entrada. Cuando una tecla sea presionada, ese div se desvanecerá con la letra, y volverá a aparecer. Esto simulará la verificación de presionamiento de tecla del iPhone.

$(function() {
    $("#login-form-1 div").append("<div id='letterViewer'>");
    $("#user-password").keypress(function(e) {
        $("#letterViewer")
            .html(String.fromCharCode(e.which))
            .fadeIn(200, function() {
                $(this).fadeOut(200);
            });
    });
});

Por supuesto, esto se puede estilar de la forma que cada uno desee.

Cambiar el texto por asteriscos/ sólo mostrar el último carácter

Hacer que el texto se transforme en un asterisco luego de un breve lapso de tiempo es algo un poco m├ís complicado. Cambiar la entrada de la contrase├▒a para que sea del tipo =”text”, para luego cambiar el valor a asteriscos ser├şa muy problem├ítico porque se necesita ingresar el valor real del campo y no asteriscos. Y tampoco se puede dejar la entrada como tipo =”password”, porque nada se puede mostrar en esas entradas excepto asteriscos.

La solución es duplicar el campo de la contraseña, cambiarlo por una entrada de texto y esconder el original. De esta forma se puede usar el nuevo campo y manipularlo de la forma en que deseemos, pero en última instancia se enviará la entrada de contraseña oculta que se mantiene actualizada con la información que está siendo tipeada.

Existe precisamente un plugin de jQuery creado especialmente para esto.

Simplemente etiqueta tu entrada de contrase├▒a e invoca el plugin:

$('#user-password-2').dPassword();

Por supuesto, como en cualquier buen plugin, existen varias opciones que pueden utilizarse como parámetros: como el retraso antes de que se cambien las letras por asteriscos, el prefijo para la entrada duplicada, y más.

Haz clic aqu├ş para ver el Demo┬╗

Descarga los archivos aqu├ş┬╗

Fuente: Css-Tricks


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (2)

  1. Ren├ę C++ dice:

    Excelente articulo…..
    Habra que ver si se puede manipular conjuntamente con PHP and MySQL.

    SALU2 Micaela :)”

  2. Melvin Lainez dice:

    Excelente muy buen aporte
    Gracias

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder