JavaScript: modificare la visibilità del testo di un campo password

In JavaScript è semplice modificare la visibilità del testo di un campo password.

La soluzione consiste nel manipolare l'attributo type del campo operando uno switch tra i valori password e text.

Data quindi la seguente marcatura:

<form action="" method="post" id="login">
 <div>
  <input type="password" id="pwd" name="pwd">
 </div>
 <div>
  <input type="checkbox" id="show-hide" name="show-hide" value="">
  <label for="show-hide">Mostra</label>
 </div>
 <p><input type="submit" value="Login"></p>
</form>

Possiamo scrivere il seguente codice JavaScript:

'use strict';

const togglePassword = (element, field) => {
    element.addEventListener( 'change', () => {
		if( element.checked ) {
			field.setAttribute( 'type', 'text' );
		} else {
			field.setAttribute( 'type', 'password' );	
		}
    }, false);
};

document.addEventListener('DOMContentLoaded', () => {
    togglePassword(document.querySelector('#show-hide'), document.querySelector('#pwd'));
});