Inicio Apuntes FPApuntes DAW Mostrar u ocultar el password de un formulario usando poco código

Mostrar u ocultar el password de un formulario usando poco código

Utiliza tan solo HTML, CSS y JavaScript

Publicado por entreunosyceros
Publicado el: Última actualización:

AVISO: Esta entrada tiene más de dos años desde su publicación. Es posible que el contenido esté desactualizado.

Una vez más aquí. Hoy vengo a dejar un pequeño artículo sobre algo que me preguntó un usuario estos días. El usuario me preguntaba cómo podía crear un botón para mostrar u ocultar el password de un formulario. Buscando un poco entre mis apuntes de hace ya unos años, me encontré un pequeño JavaScript, el cual añadiéndolo a un archivo HTML, y dándole CSS, puede darnos el efecto deseado.

Este script con un poco de CSS nos va a permitir mostrar u ocultar el password fácilmente en nuestros formularios. La lógica detrás de esto es que, en principio el tipo de entrada es una contraseña, por lo que los caracteres se van a ver como los típicos puntos o asteriscos (nunca supe realmente que son), pero cuando hagamos clic en el botón o icono que se le va a añadir para alternar, el tipo de entrada cambia a texto, lo que hará que la contraseña se vuelva visible.

mostrar-ocultar-password

Mostrar u ocultar el password de un formulario con HTML, CSS y JavaScript

Para crear el ejemplo de esta pequeña utilidad, tan solo tendremos que crear dos archivos. El primero será un archivo HTML y el otro es un archivo CSS. Después de crear estos archivos, para probar este ejemplo en tu equipo tan solo necesitarás pegar el código que vamos a ver a continuación dentro de cada uno de ellos.

HTML y JavaScript

Como decía, vamos a crear un archivo HTML con el nombre de index.html y a pegar el siguiente código dentro. En este código, además del HTML, vamos a añadir también el pequeño JavaScript con el que podremos pasar de mostrar a ocultar el password.





    
    Mostrar u ocultar una contraseña
    




    
    

El CSS

Como decíamos, el segundo archivo será un CSS con el nombre de style.css, y como en el caso anterior, vamos a pegar las siguientes reglas CSS.

* {
    margin: 0;
    padding: 0;
    font-family: 'Comic Sans', sans-serif;
    box-sizing: border-box;
}

html, body {
    place-items: center;
    background: #1100ff;
    display: grid;
    height: 100%;
}

.wrapper {
    position: relative;
    height: 60px;
    width: 400px;
    border-radius: 5px;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}

.wrapper input {
    width: 100%;
    height: 100%;
    border: 1px solid #5b3e68;
    padding-left: 15px;
    font-size: 18px;
    border-radius: 5px;
}

.wrapper input::placeholder {
    font-size: 18px;
}

.wrapper span {
    font-size: 20px;
    color: #5b3e68;
    cursor: pointer;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}

.wrapper span i.esconder-btn::before {
    content: "\f070"; //el icono del ojo tachado
}

.wrapper input:valid~span {
    display: block;
}

Y bueno, una vez que los códigos estén dentro de cada archivo, solo queda ejecutar el archivo .html que acabamos de crear para ver funcionando el ejemplo. Aun que si quieres verlo funcionando, sin necesidad utilizar los archivos en tu equipo local, puedes ver este ejemplo funcionando en el siguiente enlace.

También te puede interesar ...

Deja un comentario

* Al utilizar este formulario, aceptas que este sitio web almacene y maneje tus datos.

Adblock Detectado!!

Ayúdanos deshabilitando la extensión AdBlocker de tu navegador para visitar esta web.
Si no sabes hacerlo en Chrome, consulta el siguiente enlace. Si utilizas Firefox, puedes consultar este otro enlace.
Esto mejorará tu experiencia en este sitio web.