Έχουμε ένα μικρό javascript snippet που εμφανίζει τα γράμματα όταν πληκτρολογούμε στο πεδίο password.

• Θα χρειαστούμε δύο αρχεία ενα index.html για την φόρμα.
• Και ένα script.js για την javascript.

index.php

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">

<form action="" method="post" enctype="multipart/form-data">
  <h2>Απόκρυψη και εμφάνιση του password</h2>
   <fieldset>
      <legend>Εισαγωγή κωδικού</legend>
      <input type="password" name="password" id="password">
      <span id="eye" onclick="showPassword('password')" class="far fa-eye-slash"></span>
   </fieldset>    
</form>

<script src="script.js"></script>

- Με το link στην γραμμή 2 εισάγουμε την βιβλιοθήκη εικονιδίων font-awesome για να χρησιμοποιήσουμε τα εικονίδια απόκρυψης και εμφάνισης.
- Στην γραμμή 4 έχουμε την html φόρμα μας.
- Στην γραμμή 8 εχουμε το πεδίο password και το έχουμε ορίσει ως type=password, με την javascript θα αλλάξουμε το χαρακτηριστκό type και θα το κάνουμε type=text, για να είναι ορατοί η χαρακτήρες που πληκτρολογούμε.
- Γραμμή 9, έχουμε ένα εικονίδιο όπου η αρχική του κατάσταση μας δείχνει ότι το password δεν είναι ορατό. Δείτε το demo.
Σε αυτό το εικονίδιο έχουμε ορίσει μια javascript συνάρτηση με ένα onclick event όπου θα τρέχει όποτε κάνουμε κλικ πάνω του. Αυτή η συνάρτηση θα αλλάζει το χαρακτηριστκό type που είπαμε παραπάνω.
Υ.Γ - Στην συνάρτηση δίνουμε ως παράμετρο την id του πεδιόυ password για να το χειριστούμε με την javascript.

Μπορείτε να δείτε την συλλογή font-awesome Εδώ

script.js

function showPassword(el){
	let passwordField = document.getElementById(el);
	let eye = document.getElementById('eye');
	
	if(eye.classList.contains("fa-eye-slash")){
		eye.classList.remove('fa-eye-slash');
		eye.classList.add('fa-eye');
		passwordField.setAttribute('type','text');
	}else{
		eye.classList.remove('fa-eye');
		eye.classList.add("fa-eye-slash");
		passwordField.setAttribute('type','password');
	}
}
  

- Στο javascript αρχείο μας έχουμε γράψει την συνάρτηση showPassword() .
-Στην γραμμή 3 και 4 φτιάχνουμε δυο μεταβλητές και ορίζουμε σε αυτές τα δυο html στοιχεία της φορμας που θέλουμε να διαχειριστούμε. Στήν πρώτη μεταβλητή ορίζουμε το πεδίο password, που μας έρχεται ως παράμετρος( el ), και στην δεύτερη το span με το εικονίδιο στοχεύωντας την id του με την document.getElementById().
Στήν γραμμή 6 αρχίζει η λογική της συνάρτησης. Η οποία έχει ως εξής:
Εάν υπάρχει η κλάση του εικονιδίου fa-eye-slash : Τότε
Αφαίρεσε αυτήν την κλάση.
Πρόσθεσε την κλάση fa-eye.
Και άλλαξε το χαρακτηριστκό του password σε type=text
Αλλιώς:
Αφαίρεσε την κλάση fa-eye
Πρόσθεσε την κλάση fa-eye-slash.
Και άλλαξε το χαρακτηριστκό του password σε type=password

Δείτε το demo και κατεβάστε τα αρχεία, για τα χρησιμοποήσετε σε κάποιο project.

Για περισότερες πληροφορίες πάνω στίς συναρτήσεις που χρησιμοποιήσαμε θα βρείτε στα παρακάτω links.

• getElementById
• setAttribute
• classList