Posts Tagged ‘usabilidad’

abril 26, 2010 1

Hacer visible un campo password con jQuery

By in JavaScript, Librerías

Los campos de tipo password no muestran el contenido que tecleamos, evidentemente para evitar que alguien pueda ver nuestras contraseñas. Pero en ocasiones, por ejemplo cuando estamos en casa y no hay nadie cerca, nos puede interesar mostrar el contenido de estos. Usando la librería jQuery podemos hacer esto de forma muy sencilla.

Vamos a ver primero el código de nuestro formulario:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
      <title>Login</title>
      <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
      <script type="text/javascript" src="login.js"></script>
   </head>
   <body>
      <form onsubmit="return false;">
         <label for="user">Usuario:</label><input type="text" name="user" id="user"/><br/>
         <label for="password">Password:</label><input type="password" name="password" id="password"/><br/>
         <input type="checkbox" id="show"/> <label for="show">Mostrar password.</label><br/>
         <input type="submit" value="login"/>
      </form>
   </body>
</html>

Es un formulario muy sencillo, ni siquiera envia datos, pero nos sirve como ejemplo. Podemos ver que añadimos dos scripts a la página, el de jQuery y el que contendrá el código para mostrar el campo password. También observamos que hay un campo checkbox que tendremos que seleccionar para ver el contenido de campo password.

Ahora vamos con el código para mostrar el valor del campo, que está en el archivo login.js:

$(document).ready( function(){

   $('#show').attr('checked', false);

   $('#show').click(function(){

      name = $('#password').attr('name');
      value = $('#password').attr('value');
      if($(this).attr('checked'))
      {
         html = '<input type="text" name="'+ name + '" value="' + value + '" id="password"/>';
         $('#password').after(html).remove();
      }
      else
      {
         html = '<input type="password" name="'+ name + '" value="' + value + '" id="password"/>';
         $('#password').after(html).remove();
      }
   });
});

Básicamente lo que hacemos es añadir un evento click al campo checkbox. Cuando se hace click sobre el checkbox este comprueba su valor y sustituye el campo, por otro igual del tipo que corresponda, password cuando no está seleccionando y text cuando lo está, dándole el mismo valor a los atributos de este.

Podéis ver una demo en el siguiente enlace:

Demostración de como hacer visible un campo password con jQuery

Y también podéis descargar los archivos de la demo:

Archivos para hacer visibe un campo password con jQuery

Comparte esta entrada:
Delicious Digg Google Technorati Menéame Fresqui Reddit Facebook Twitter Yahoo! Buzz MySpace Email BarraPunto

Tags: , , ,