Cómo ver u ocultar contraseña con Javascript y jQuery

Cómo ver u ocultar contraseña con Javascript o jQuery

Hola.

En este post voy a compartir el código que pueden usar para ver u ocultar una contraseña con Javascript puro y con jQuery.

Se ha vuelto muy común en los formularios de login o de registro el ofrecer la posibilidad de ver y ocultar un campo de seguridad. El campo de seguridad más común es el de contraseña (input type=password)

En este caso estoy usado un objeto de tipo button y sus eventos de onmousedown y onmouseup. 

Los eventos dependerán del objeto que estén usando pero en general son los mismo eventos para cualquier tipo de objeto HTML. La funcionalidad y la manera de aplicarlo dependerá de sus requerimientos.

Les dejo abajo dos maneras jugando con los eventos y en Javascript puro además de jQuery.

Hay algo mágico al usar Javascript puro, es como volver el tiempo y usar el pelo largo 😂😄 y sobre todo sin librerías extras. Para el código con jQuery bueno ya saben que deben tener la librería incluida en su archivo.

1. Click al botón cambia de password a text y viceversa.

Javascript

<button type="button"  onmousedown="var p=document.getElementById('Password');p.type=='password'?p.type='text':p.type='password';">Click Me!</button>

jQuery

<button type="button"  onmousedown="$('#Password').attr('type')=='password'?$('#Password').attr('type','text'):$('#Password').attr('type','password');">Click Me!</button>

2. Presionado el botón cambia a texto y liberando el botón cambia a password.

Javascript

<button type="button"  onmousedown="var p=document.getElementById('Password');p.type='text'" onmouseup="var p=document.getElementById('Password');p.type='password';" >Click Me!</button>

jQuery

<button type="button"  onmousedown="$('#Password').attr('type','text');" onmouseup="$('#Password').attr('type','password');" >Click Me!</button>

Espero les sirva.