Snippet: mostrar u ocultar una contraseña en un formulario

19 Oct 2016

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.
password-unveil
Ejemplo de aplicación. Imagen tomada de dreamerux.com

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' );
} );
Más:

Aún no tenemos debug!
Ningún marciano se ha comunicado.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *