Mostrare e nascondere la password che l'utente sta inserendo è un utile caratteristica che può essere aggiunta ai nostri form per migliorarne l'usabilità. In JavaScript la soluzione è molto semplice.
Si tratta di sfruttare l'evento change
su una checkbox e modificare l'attributo type
del campo password in base al valore della proprietà checked
:
'use strict';
class PasswordToggler {
constructor(element, field) {
this.element = document.querySelector(element);
this.field = document.querySelector(field);
this.toggle();
}
toggle() {
this.element.addEventListener('change', () => {
if(this.element.checked) {
this.field.setAttribute('type', 'text');
} else {
this.field.setAttribute('type', 'password');
}
}, false);
}
};
Quindi data la seguente struttura HTML:
<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">Show password</label>
</div>
<p><input type="submit" value="Login"></p>
</form>
Possiamo usare la nostra classe in questo modo:
document.addEventListener('DOMContentLoaded', () => {
const toggler = new PasswordToggler('#show-hide', '#pwd');
});