Creare il Pulsante Mostra/Nascondi Password JavaScript

Se hai avuto modo di sviluppare pagine web interattive con moduli/form HTML che permettano di far eseguire l’accesso agli utenti, avrai sicuramente pensato di integrare un pulsante “Mostra Password/Nascondi Password” per visualizzare o nascondere le password degli utenti.

Se ancora non lo hai sviluppato, ti aiuterò io in questo articolo a creare un pulsante (o più pulsanti) dedicato per mostra/nascondi password nei campi di un form HTML, con del semplice codice JavaScript.

Mostra/nascondi password con JavaScript

Quello che ti mostrerò in questo post è, a mio avviso, uno dei metodi più semplici ed efficaci che ho avuto modo di usare per mostrare o nascondere la password di uno o più elementi di input (type="password"), poiché è facile da integrare attraverso alcuni parametri personalizzati, che andrò a spiegare qui di seguito.

Dividerò il codice in due parti, quello HTML e quello JavaScript. Eviterò di personalizzare lo stile CSS, compito che lascio al lettore.

Inoltre qui troverai il codice interattivo Codewith.it, se necessiti di ulteriori chiarimenti.

Codice HTML

Di seguito il codice HTML del modulo (form) interessato, dove sono contenuti degli elementi di input di esempio, che replicano un modulo di accesso ad un sito web.

<form>
  <label>email</label><br>
  <input type='email'  placeholder='indirizzo email' required><br>
  <label>password</label><br>
  <input type='password' class='psw' placeholder='••••••••' required><br>
  <label>conferma password</label><br>
  <input type='password' class='psw' placeholder='••••••••' required><br>
  <a href='#' class='mostraPass'>Mostra password</a><br>
  <input type='submit'>
</form>

Come puoi notare, sono presenti due elementi <input type="password">, con la stessa classe CSS e le stesse caratteristiche. Con JavaScript useremo proprio la classe CSS per la selezione degli elementi.

Codice JavaScript

Per mostrare e nascondere le password con JavaScript, la soluzione è la seguente ed è quella che preferisco. ti basterà copiare e incollare il codice prima della chiusura del tag </body> in HTML o in un file .js posto nello stesso punto del documento.

Questo script rileverà in automatico ogni singolo campo di tipo “password” nel modulo HTML. Puoi avere anche 2 o più moduli HTML dello stesso tipo e funzionerà ugualmente.

// da incollare alla fine del documento nel tag <script>

// Se il documento ha degli elementi con classe "mostraPass"
if(document.getElementsByClassName('mostraPass')){
  let mostraPassAr = document.getElementsByClassName('mostraPass');
  // loop degli elementi
  Array.from(mostraPassAr).forEach((el)=>{

    // Evento click sugli elementi
    el.addEventListener('click',()=>{

       // ! importante è selezionare l'elemento genitore degli INPUT type=password (in questo caso l'elemento <form>
      let parent = el.parentElement.parentElement;

       // seleziono elementi di input type=password
      let passFields = parent.getElementsByClassName('psw');

       // variabile locale, non eliminare
      let changed = false;

       // loop tra i campi di password
      Array.from(passFields).forEach((pass)=>{
        if(pass.type == "password"){

          // mostra la password
          pass.type = "text";
          pass.placeholder = "password";
          if(changed == false){
            el.innerText = "Nascondi password";
            changed = true;
          }
        }else{

          // nasconde la password
          pass.type = "password";
          pass.placeholder = "••••••••";	
          if(changed == false){
            el.innerText = "Mostra password";
            changed = true;
          }
        }
      });
    });
  });
}

Cosa accade dunque con questo script? Semplicemente, cliccando con il mouse sul pulsante/link “Mostra password“, tutti gli elementi di tipo Input type='password' verranno convertiti in type='text', e viceversa dopo aver eseguito un secondo click.

Metodo alternativo

Se preferisci usare una funzione apposita per ottenere questo risultato, eseguibile da qualsiasi punto del documento, ti propongo una soluzione alternativa.

function MostraNascondiByClass(classe){
  let passFields = document.getElementsByClassName(classe);
  let changed = false;
  // loop tra le classi degli elementi input typo password
  Array.from(passFields).forEach((pass)=>{
    if(pass.type == "password"){
      pass.type = "text";
      pass.placeholder = "password";
      if(changed == false){
        event.target.innerText = "Nascondi password";
        changed = true;
      }
    }else{
      pass.type = "password";
      pass.placeholder = "••••••••";	
      if(changed == false){
        event.target.innerText = "Mostra password";
        changed = true;
      }
    }
  }
)}

Con questa funzione si ottiene lo stesso risultato, ma potrebbe non funzionare se non configurato adeguatamente. Inoltre va definito l’evento “onclick” sul pulsante interessato per l’esecuzione della funzione. Ad esempio:

document.getElementsByClassName('mostraPass')[0].onclick = ()=>{
  MostraNascondiByClass('psw');
}

Personalizza a tuo piacimento questi script per adattarli meglio alle tue esigenze. Scrivi un commento se necessiti di ulteriori chiarimenti o modifiche.

Codice completo

Qui in basso il codice completo HTML + JS. Ricordati che puoi testare il codice su Codewith.it gratuitamente.

<form>
  <label>email</label><br>
  <input type='email'  placeholder='indirizzo email' required><br>
  <label>password</label><br>
  <input type='password' class='psw' placeholder='••••••••' required><br>
  <label>conferma password</label><br>
  <input type='password' class='psw' placeholder='••••••••' required><br>
  <a href='#' class='mostraPass'>Mostra password</a><br>
  <input type='submit'>
</form>

<script>
// da incollare alla fine del documento nel tag <script>

// Se il documento ha degli elementi con classe "mostraPass"
if(document.getElementsByClassName('mostraPass')){
  let mostraPassAr = document.getElementsByClassName('mostraPass');
  // loop degli elementi
  Array.from(mostraPassAr).forEach((el)=>{

    // Evento click sugli elementi
    el.addEventListener('click',()=>{

       // ! importante è selezionare l'elemento genitore degli INPUT type=password (in questo caso l'elemento <form>
      let parent = el.parentElement.parentElement;

       // seleziono elementi di input type=password
      let passFields = parent.getElementsByClassName('psw');

       // variabile locale, non eliminare
      let changed = false;

       // loop tra i campi di password
      Array.from(passFields).forEach((pass)=>{
        if(pass.type == "password"){

          // mostra la password
          pass.type = "text";
          pass.placeholder = "password";
          if(changed == false){
            el.innerText = "Nascondi password";
            changed = true;
          }
        }else{

          // nasconde la password
          pass.type = "password";
          pass.placeholder = "••••••••";	
          if(changed == false){
            el.innerText = "Mostra password";
            changed = true;
          }
        }
      });
    });
  });
}
<script>

Articoli recenti:

• Upgrade Scheda Rete. Sostituzione della Realtek RTL8822CE
• Da jQuery a JavaScript Puro: Sfruttare il Potenziale Nativo del Web
• Come Risolvere i Problemi di Connessione Bluetooth al PC
• Guida alla Cybersecurity: Come proteggerti da minacce informatiche
• Come Aggiungere un Dizionario su App Kindle