Come impostare l’icona mostra password

In questo articolo descriverò il metodo per inserire l’icona mostra password in una form di login mediante l’utilizzo di un codice javascript il quale cambia il tipo di input del campo password della form di login.

Ho applicato il codice a una form sviluppata in un sito WordPress usando il plugin WP Simple Membership. Questa è la form prima dell’intervento:

L’intervento da fare in questo caso è stato editare il codice html della form, in modo da aggiungere l’icona dell’occhio che, al click dell’utente, mostra la password immessa.

Nel blocco di codice html l’attenzione va sulla riga 14

Questa è staa aggiunta al codice iniziale che definiva la form per far comparire l’icona dell’occhio. Va detto preliminarmente che per poter visualizzare l’icona è necessario utilizzare la libreria Font Awesome. È importante definire un id per l’elemento, che servirà successivamente nel codice javascript. Gli attributi style servono invece per posizionare correttamente l’icona al termine del campo password.

Successivamente si deve inserire il codice javascript, per far funzionare il tutto.

Il funzionamento di questo codice si capisce a prima vista, comunque nello specifico compie queste azioni:

• recupera i campi password e l’icona dell’occhio
• attiva un listener sul click dell’icona dell’occhio. Quando questo avviene cambia il tipo del campo da password a testo e modifica l’icona