Πίσω στο ευρετήριο

Show hide password with javascript Posted: 10-Mar-2020 23:28 PM

javascript, html tutorial
Δες το Demo Κατέβασε τα αρχεία 2 downloads

Έχουμε ένα μικρό 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.

Σχόλια και ερωτήσεις μέσω facebook

Παρόμοια javascript tutorials

javascript and css slideshow 21-Feb-2020 01:27 AM Slideshow με fade effect, κείμενο, cta button, και responsive design γραμμένο σε css και javascript Show hide password with javascript 10-Mar-2020 23:28 PM Ένα javascript που εμφανίζει τα γράμματα όταν πληκτρολογούμε στο πεδίο password. Image preview with javascript 19-Feb-2020 16:04 PM Άμεση απεικόνιση της εικόνας σε file upload ενέργεια Autofill select combo box 27-Feb-2020 00:10 AM Θα δούμε πως μπορούμε να συνδυάσουμε δυο select drop-down menu έτσι ώστε επιλέγοντας το πρώτο να δίνουμε τις ανάλογες τιμές στο δεύτερο.

php Tutorials

Uploading an article with image 01-Mar-2020 22:13 PM Έχουμε μια φόρμα με τρία πεδία, τίτλο,άρθρο, και εικόνα, θα ανεβάσουμε την εικόνα στον server και θα εισάγουμε τα στοιχεία σε μια mysql βάση. Image resizing with php 09-Mar-2020 19:16 PM Ενα php script για να τροποποιούμε τις διαστάσεις των φωτόγραφίων κατά το upload. Register form with php and ajax 24-Feb-2020 16:39 PM Εχουμε μια φόρμα εγγραφής στην οποία τα δεδομένα θα σταλούν με Ajax στο php αρχείο για επικύρωση. Image upload with php 17-Feb-2020 18:17 PM Σε αυτό το tutorial θα ανεβάσουμε μια φωτό στον server, και θα επικυρώσουμε (validate) αν η φωτό είναι έγκυρη.
Contact form validation with php 16-Mar-2020 00:54 AM Θα επικυρώσουμε μια φόρμα επικοινωνίας με php, και θα εισάγουμε τις τιμές σε μια βάση δεδομένων.

css Tutorials

Resposive navbar with css and javascript 05-Mar-2020 21:24 PM Ένα responsive οριζόντιο μενού πλοήγησης για μικρή και μεγάλη οθόνη, με css και λίγη javascript. Highlight selected menu page 12-Mar-2020 11:56 AM Έχουμε ένα οριζόντιο μενού όπου θα αλλάζουμε το background-color του link στην επιλεγμένη σελίδα. Sticky navbar με css και javascript 28-Feb-2020 18:32 PM Έχουμε ένα οριζόντιο μενού όπου θα κολλάει στήν αρχή της σελίδας όταν κάνουμε scroll. Responsive grid layout 04-Mar-2020 17:15 PM Έχουμε μια responsive ιστοσελίδα που προσαρμόζεται σε όλες τις οθόνες

webDev Αναφορές

PHP Net Το σπίτι της php είναι η πιο έγκυρη πηγή εκμάθησης. Javascript Μozilla MDN web docs Τα πάντα για την Javascript. Όρεξη να έχεις να διαβάζεις. CSS Μozilla MDN web docs Απο βασικά styles εως animation, εδω θα τα μάθεις όλα. Programming Notes for Professionals Μια φοβερή συλλογή από PDF αρχεία, από Android εώς C++. Αξίζει να κατεβάσετε και να μελετήσετε τα αρχεία.

PHPDev Tutorials | Site developed by PHPDev.gr Visit PHPDev

scrollTo('top')