Objetivo
Tenemos un formulario con una caja de tipo ‘password‘ y queremos dar al usuario la posibilidad de ver su contenido mientras escribe.
El snippet, para mantener una estructura sencilla y reutilizable, se compone de dos funciones: la primera se encarga de recoger el evento para mostrar la contraseña (por lo general, un botón etiquetado como ‘Mostrar Contraseña’); la segunda función es la que modifica el tipo (password/text) de la caja en el formulario.
Cuándo puede ser útil
- Tenemos un formulario con uno o varios controles de tipo ‘password’ y queremos poder alternar su vista entre asteriscos y texto normal.
- Esta funcionalidad es interesante en formularios tanto de tipo Registro como de Inicio de Sesión.

Soporte y dependencias
- jQuery (cualquier versión). No es imprescindible y lo usamos aquí solo por comodidad.
El código
Función para cambiar el tipo de control
/** * ChangeType * Changes the default type of an element in another given one * * Related: passUnmask * * @see passUnmask * @param {object} ele The jQuery element that will be changed. * @param {string} type The new type for the input selected. * @return {object} */ var changeType = function ( ele, type ) { if ( ele.prop( 'type' ) === type ) { return ele; } try { return ele.prop( 'type', type ); //Stupid IE security will not allow this } catch ( e ) { // Try re-creating the element (yep... this sucks) // jQuery has no html() method for the element, so we have to put into a div first var html = $( '<div>' ).append( ele.clone() ).html(), regex = /type=(")?([^"\s]+)(")?/, //matches type=text or type="text" //If no match, we add the type attribute to the end; otherwise, we replace tmp = $( html.match( regex ) === null ? html.replace( '>', ' type="' + type + '">' ) : html.replace( regex, 'type="' + type + '"' ) ), events, cb; //Copy data from old element tmp.data( 'type', ele.data( 'type' ) ); events = ele.data( 'events' ); cb = function ( events ) { return function () { //Bind all prior events for ( var i in events ) { var y = events[ i ]; for ( var j in y ) { tmp.bind( i, y[ j ].handler ); } } }; } ( events ); ele.replaceWith( tmp ); setTimeout( cb, 10 ); // Wait a bit to call function return tmp; } } |
Función disparadora
La función recoge un selector o instancia de jQuery (el campo que contiene la contraseña de nuestro formulario) y, dependiendo del tipo actual (texto o password) llama a la función conversora (changeType) para alternarlo.
/** * passUnmask * Reveals a password input changing its type to text. * * @return void */ var passUnmask = function ( $input ) { $input.each( function () { var $self = $( this ); changeType( $self, $self.attr( 'type' ) === 'password' ? 'text' : 'password' ); } ); }; |
Ejemplo de uso
Por lo general, un botón en el formulario permite al usuario ver la contraseña. En este caso, suponemos que ese botón tiene la clase ‘view-password‘ mientras que el campo de contraseña en el formulario tiene la clase ‘user-password‘.
$( '.view-password' ).on( 'click', function () { passUnmask( '.user-password' ); } ); |
Aún no tenemos debug!
Ningún marciano se ha comunicado.