Creare il tasto mostra/nascondi password – Funzioni HTML&JS

In questa guida della serie “Funzioni HTML&JS” scoprirai come poter programmare un tasto mostra e nascondi password contenuta in un campo input di un form.

Quante volte ti è capitato di scrivere una password in un modulo HTML e di avere il dubbio di averla scritta correttamente?

Nei form HTML, nei campi dedicati alle password, come ben saprai i caratteri digitati vengono nascosti, sostituiti da un simbolo speciale come l’asterisco (*) o il classico pallino nero. Questa particolare caratteristica consente di oscurare la stringa e renderla illeggibile nel caso ci fossero occhi indiscreti accanto a noi.

Purtroppo però può capitare di avere ripensamenti e dubbi sui caratteri digitati, e per paura di sbagliare, ci sentiamo costretti a cancellare e riscrivere la password da capo.

Fortunatamente possiamo risolvere il problema con il tasto mostra/nascondi password, che in genere è presente in molti siti web e nei moduli di accesso HTML. Questo utile strumento ci permette di convertire il campo password ad un’area di testo con i caratteri visibili, al posto dei comuni pallini neri.

Purtroppo però non è possibile integrare questa funzione con il solo HTML, ma chiunque abbia voglia di implementarla nelle proprie pagine web, dovrà fare uso di JavaScript o di un altro linguaggio di programmazione.

In questo articolo di aiuteremo ad inserire un tasto mostra e nascondi password facilmente con poche righe di codice JavaScript.

Pulsante mostra e nascondi password

Descrizione della funzione

L’avrai vista e utilizzata mille volte; questa funzione mostra/nascondi (in inglese show/hide password) è integrata nei form/moduli HTML delle pagine di accesso e di registrazione. Normalmente viene attivata da un apposito pulsante con l’icona di un occhio umano, che al click del mouse sostituirà i caratteri speciali di oscuramento password ai caratteri realmente digitati da tastiera.

Il motivo che spinge i programmatori ad integrare questo tasto mostra/nascondi nei moduli online, è per aiutare gli utenti a non commettere errori di invio dati. Il tasto consentirà a loro di ricontrollare accuratamente la password prima di inviarla.

L’uso del pulsante è facoltativo, è un semplice aiuto per la scrittura della parola chiave.

Qui un immagine di esempio:

mostra e nascondi password - esempio

N.B. in questo articolo non modificheremo lo stile CSS degli elementi. Ti mostreremo solo come implementare questa funzione e creare un “button” HTML che la esegua.
Segui il nostro corso HTML e CSS per maggiori informazioni

Il codice

Il codice da integrare nella pagina è suddiviso in due parti:

  • HTML – L’elemento fisico su cui andremo ad agire per convertire i caratteri della password contenuti in un campo di input.
  • JavaScript – La funzione vera e propria che verrà eseguita al click del pulsante.

A fondo pagina puoi testare il funzionamento con un esempio pratico.

HTML

Il pulsante HTML realizzato con il markup “button” (con il tag button o input, è indifferente) e l’area di testo di tipo password.

Questi sono elementi basilari della creazione di un form HTML. Ciò non obbliga ad inserire questi tag in un vero form, ma possono anche essere separati; l’importante è che i selettori ID di riferimento corrispondano a quelli indicati nello script JS che vedremo di seguito.

Il codice è questo:

<input type="password" id="pwd">
<input type="button" onclick="showPwd()" value="Mostra/nascondi password">

Il primo elemento è l’input password con id di riferimento pwd; Il secondo è il pulsante, che al click eseguirà la funzione showPwd() per mostrare la password, al secondo click la nasconderà nuovamente.

JavaScript

Ora non resta che definire la funzione JavaScript, infatti l’ultimo step è integrare lo script nel fondo del documento HTML (o in un file .js esterno).

Il codice è il seguente:

      function showPwd() {
        var input = document.getElementById('pwd');
        if (input.type === "password") {
          input.type = "text";
        } else {
          input.type = "password";
        }
      }

Il funzionamento è semplice: Al click del tasto, se la tipologia dell’input è “password”, questa cambierà in “text” (type="text" mostra i caratteri reali, type="password" li nasconde). Inoltre funziona anche in senso contrario, perciò al secondo click, il testo verrà nascosto.

Esempio

Verifica il funzionamento dello script qui in basso:

Codice completo

<input type="password" id="pwd">
<input type="button" onclick="showPwd()" value="Mostra/nascondi password">
<script>
      function showPwd() {
        var input = document.getElementById('pwd');
        if (input.type === "password") {
          input.type = "text";
        } else {
          input.type = "password";
        }
      }
</script>

TI è piaciuto l’articolo? Scrivicelo nei commenti!

Leggi anche: Copiare il testo nella clipboard da pulsante

Iscriviti alla nostra Newsletter qui e seguici su Facebook per aggiornamenti!


Articoli recenti:

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

CAPTCHA