pon css en tu vida!

Hace unos meses, a raíz de un de un artículo de Jakob Nielsen, comentaba la posibilidad de hacer más usables los formularios de login mediante un checkbox para mostrar y ocultar la contraseña.

Y aunque la idea no me parecía descabellada, pasó de largo por mi cabeza como tantas y tantas cosas que vemos al día por Internet.

Sin embargo, después de tener la posibilidad utilizar un móvil para conectarme a Internet, me doy cuenta de cuan engorroso puede llegar a ser meter nuestra contraseña utilizando el teclado del móvil, y lo frustrante que es no saber si lo que has introducido es la contraseña correcta.

El resultado de todo esto es un pequeño script en jQuery que nos permite mostrar y ocultar el valor de un input de tipo password.

DEMO | DESCARGAR EJEMPLO

Más info, después del salto

La forma de hacerlo es muy sencilla. Simplemente creamos un input de tipo “text” donde copiaremos lo que se escriba en el password, y viceversa. Mediante el checkbox, mostraremos u ocultaremos ese input con la contraseña “legible”.

Mediante el HTML, creamos el típico formulario de login, con sus campos usuario y contraseña:

<form action="#">
     <fieldset>
          <p>
               <label for="user">Usuario</label>
               <input type="text" id="user" />
          </p>
          <p>
               <label for="password-hide">Contraseña</label>
               <input type="password" id="password-hide" />
          </p>
          <p>
               <input type="submit" id="send" value="Enviar" />
          </p>
     </fieldset>
</form>

Con jQuery hacemos el resto.

jQuery(document).ready(function() {
     var passwText = jQuery('#password-hide');

     // Creamos el input que contendrá la contraseña "visible"
     // y el checkbox
     passwText.after('<span class="showpass"><input type="text" id="password-show" /><input type="checkbox" id="toogle-check"/><label for="toogle-check">Mostrar Contraseña</label></span >');
     var toogCheck = jQuery('#toogle-check');
     var inputText = jQuery('#password-show');

     inputText.hide();

     // Recogemos los caracteres introducidos como contraseña
     // y los compiamos al otro campo
     inputText.keyup(function() { passwText.attr('value', inputText.attr('value')); });
     passwText.keyup(function() { inputText.attr('value', passwText.attr('value')); });

     // Click sobre el checkbox
     $(toogCheck).click(function() {
          if( toogCheck.is(':checked') ) {
               inputText.show(); passwText.hide();
          } else {
               inputText.hide(); passwText.show();
          }
     });
});

Creamos el campo que contendrá la contraseña visible (#password-show) y el checkbox que los habilitará. Es necesario crearlos con jQuery, ya que si el usuario no tiene activado javascript en su navegador, no le aparecerán campos inservibles en el formulario de login que le puedan confundir.

Con el evento keyup de jQuery, recogeremos los caracteres de la contraseña para tener exactamente igual ambos campos (#password-hide y #password-show). Mapeamos el evento keyup de los dos input, ya que el usuario también puede introducir su contraseña en “modo visible”.

Por último, con el evento click controlamos el checkbox, para mostrar el “input password”, o el “input text”.

DEMO | DESCARGAR EJEMPLO