JavaScript: creare una classe per gestire la visibilità delle password

Short link

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');
});    

L'autore

Gabriele Romanato, sviluppatore web full stack specializzato in siti, applicativi web ed e-commerce con Node.js e PHP.