{"id":7557,"date":"2020-04-02T16:31:42","date_gmt":"2020-04-02T16:31:42","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=7557"},"modified":"2020-05-18T17:24:33","modified_gmt":"2020-05-18T17:24:33","slug":"boton-para-mostrar-contrasena-en-un-campo","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/boton-para-mostrar-contrasena-en-un-campo\/","title":{"rendered":"Bot\u00f3n para mostrar contrase\u00f1a en un campo"},"content":{"rendered":"

En este art\u00edculo vas a descubrir como agrear un bot\u00f3n para mostrar u ocultar la contrase\u00f1a en un campo de texto<\/strong> de forma sencilla utilizando JavaScript<\/strong>.<\/p>\n

Se trata de una funcionalidad muy buena que no puede faltar en tu p\u00e1gina web ya que en dispositivos peque\u00f1os, sobretodo, va a ayudar mucho al usuario cuando se est\u00e1 equivocando al teclear su contrase\u00f1a.<\/p>\n

Es un detalle que mejora mucho la usabilidad y puede evitar frustraciones al usuario en el momento de escribir su contrase\u00f1a, se ha equivocado y no puede ver donde.<\/p>\n

Cuando el usuario est\u00e1 en un dispositivo m\u00f3vil y escribe mal la palabra clave en un campo de tipo contrase\u00f1a y aparecen errores, le podemos permitir al usuario habilitar ver la contrase\u00f1a para poderla escribir viendo las letras que teclea.<\/p>\n

Bueno, esto se puede conseguir f\u00e1cilmente con un poco de HTML<\/strong>, CSS<\/strong> y JavaScript<\/strong>.<\/p>\n

C\u00f3digo HTML para mostrar la contrase\u00f1a<\/h2>\n

Dentro del cuerpo de la p\u00e1gina o etiqueta <body> debes tener un formulario en el que puede haber varios campos, entre ellos uno de tipo contrase\u00f1a, como por ejemplo lo siguiente:<\/p>\n

<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<div<\/span><\/a> class<\/span>=<\/span>"campo"<\/span>><\/span>\n    <label<\/span><\/a> for<\/span>=<\/span>"password"<\/span>><\/span>Contrase\u00f1a<\/<\/span>label<\/span><\/a>><\/span>\n    <input<\/span><\/a> type<\/span>=<\/span>"password"<\/span> name<\/span>=<\/span>"password"<\/span> id<\/span>=<\/span>"password"<\/span>><\/span>\n    <span<\/span><\/a>><\/span>Mostrar<\/<\/span>span<\/span><\/a>><\/span>\n<\/<\/span>div<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Si te fijas bien, tan solo he creado un contenedor que contiene una etiqueta label con el texto \u00abContrase\u00f1a\u00bb, un campo de tipo contrase\u00f1a y una etiqueta span que contiene el texto \u00abMostrar\u00bb.<\/p>\n
Dise\u00f1o para el c\u00f3digo de marcado que permite mostrar la contrase\u00f1a<\/h2>\n
Para agregar un poco de dise\u00f1o a esto voy a agregar lo siguiente en mi hoja de estilos CSS<\/strong>:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
.campo<\/span> {<\/span>\n    position<\/span>:<\/span> relative<\/span>;<\/span>\n}<\/span>\n \nlabel {<\/span>\n    width<\/span>:<\/span> 100<\/span>%<\/span>;<\/span>\n}<\/span>\n \ninput {<\/span>\n    width<\/span>:<\/span> 100<\/span>%<\/span>;<\/span>\n    padding<\/span>:<\/span> 7px<\/span>;<\/span>\n}<\/span>\n \n.campo<\/span> span {<\/span>\n    position<\/span>:<\/span> absolute<\/span>;<\/span>\n    right<\/span>:<\/span> 5px<\/span>;<\/span>\n    top<\/span>:<\/span> 39px<\/span>;<\/span>\n    text-transform<\/span>:<\/span> uppercase<\/span>;<\/span>\n    cursor<\/span>:<\/span> pointer<\/span>;<\/span>\n    padding<\/span>:<\/span> 2px<\/span> 10px<\/span>;<\/span>\n    background-color<\/span>:<\/span> #dadada<\/span>;<\/span>\n}<\/span><\/pre><\/div><\/div>\n
Para conseguir como resultado algo como lo siguiente:<\/p>\n
\"Mostrar<\/p>\n
C\u00f3digo JavaScript que permite mostrar y ocultar la contrase\u00f1a<\/h2>\n
En el archivo .js de tu proyecto agrega el siguiente c\u00f3digo que justamente permite controlar el evento para mostrar y ocultar la contrase\u00f1a.<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
document.querySelector<\/span>(<\/span>'.campo span'<\/span>)<\/span>.addEventListener<\/span>(<\/span>'click'<\/span>,<\/span> e =><\/span> {<\/span>\n    const<\/span> passwordInput =<\/span> document.querySelector<\/span>(<\/span>'#password'<\/span>)<\/span>;<\/span>\n    if<\/span> (<\/span>e.target<\/span>.classList<\/span>.contains<\/span>(<\/span>'show'<\/span>)<\/span>)<\/span> {<\/span>\n        e.target<\/span>.classList<\/span>.remove<\/span>(<\/span>'show'<\/span>)<\/span>;<\/span>\n        e.target<\/span>.textContent<\/span> =<\/span> 'Ocultar'<\/span>;<\/span>\n        passwordInput.type<\/span> =<\/span> 'text'<\/span>;<\/span>\n    }<\/span> else<\/span> {<\/span>\n        e.target<\/span>.classList<\/span>.add<\/span>(<\/span>'show'<\/span>)<\/span>;<\/span>\n        e.target<\/span>.textContent<\/span> =<\/span> 'Mostrar'<\/span>;<\/span>\n        passwordInput.type<\/span> =<\/span> 'password'<\/span>;<\/span>\n    }<\/span>\n}<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
Este c\u00f3digo JavaScript <\/strong>est\u00e1 esperando a que la etiqueta span, que est\u00e1 dentro del campo de contrase\u00f1a, sea pulsado para ejecutar una funci\u00f3n.<\/p>\n
Dentro de este control del evento o funci\u00f3n, he creado una variable que contiene el elemento o campo contrase\u00f1a.<\/p>\n
La l\u00f3gica que sigue es la siguiente:<\/p>\n
Si el atributo span contiene la clase \u00abshow\u00bb:<\/p>\n