Come impostare l’icona mostra password

By | Pubblicato il: 12 Ottobre 2022 | Categories: Programmazione | Ultimo aggiornamento: 15 Agosto 2023 | Tempo di lettura: 1 min |
Print Friendly, PDF & Email

Salvare un’immagine di una pagina web

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.

Copia

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.

Copia

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

Condividi questo articolo

Ciao, mi chiamo Enrico Cecchini, ho sempre avuto la passione dei computer, fin da quando ero piccolo. Ho fatto di questa passione la mia professione e dopo aver conseguito la laurea in ingegneria informatica ho iniziato a sviluppare siti web. Ho creato Mywebfriend per aiutare a risolvere dubbi e problemi che nascono utilizzando il computer.