Toggle the Visibility of Password Field with Eye Icon
Nowadays, in FORM (login, register) we can see a password field with Eye icon. It allows the visitor to toggle the password input field text visibility by clicking the toggle Eye icon.
Sometimes, we may require to hide/show password input field so, user can see what he written in password in login, register form or any other form. It is user friendly, because it ensure the user to check his entry in password field before submitting the entire form values.
Naturally, the input text will be replaced by (*). So, if the user typed “123” or “abc” the box will always show “***”. As we all know that, it is a default property of input[type=password]. Here, we are going to change this default property from input[type=password] to input[type=text].
Firstly, we will create a PASSWORD field with Eye icon. Today, I will create a FORM area with BOOTSTRAP and Font-Awesome.
HTML
As recommended by Bootstrap, we will include all supported files like bootstrap.min.css, font-awesome.css, jquery.min.js and bootstrap.min.js in our HTML file. Let us suppose, we have a Password field in a form area with class “form-group”. We will include a span with class “glyphicon glyphicon-eye-open” which will create a Eye icon. Now our HTML is,
<div class="form-group"> <input placeholder="Password" name="password" id="password" class="form-control input-field" type="password"> <span class="glyphicon glyphicon-eye-open"></span> </div>
CSS
We will adjust the Eye icon with our custom CSS like below,
<style>.form-group {
position: relative
}
.form-group input[type="password"] {
padding-right: 30px
}
.form-group .glyphicon {
right: 65px;
position:absolute;
top:12px
}</style>
JQuery
To change Visibility of Password by clicking on Eye icon, we have to toggle the “Password” and “Text” property of “type”. For this, we have written few lines of code.
$(".glyphicon-eye-open").on("click", function() {
$(this).toggleClass("glyphicon-eye-close");
var type = $("#password").attr("type");
if (type == "text"){
$("#password").prop('type','password');}
else{
$("#password").prop('type','text'); }
});
Result
That’s it! We have created the desired effect in the form area. Here is a working DEMO. 
Your turn
I hope you enjoyed this article and the techniques I used. Please share your comments and questions below! If you liked this post please share it or subscribe this website.
Dhiraj kumar is an Information Technology graduate who loves learning new things. A very popular and colorful individual, he has a particular passion for people, blogs, and the use of technology for social progress. He spends the whole day sitting in front of the computer, making himself updated with the new updates in technologies going on around him. He has more than 15 years of experience in the field of Website designing and Accessibility. He has a strong hand in Flash animation, 2D and 3D Presentation, UI web softwares in Flash with Action Scripting 2.0 / 3.0, Video Presentations, Flash Presentations, HTML, CSS, JavaScript, jQuery, Photoshop, 3Ds Max, Maya etc. read more..ALSO, TO SAVE BOTH OF US SOME TIME, YOU SHOULD KNOW THAT: Currently, I am not available for any type of freelance projects. Follow @dhiraj_kumarHTML5, CSS3 & jQuery - Web Design / Development
Pure JavaScript on single line HTML:
<input type="password"> <button onclick="this.previousElementSibling.type = this.previousElementSibling.type === 'text' ? 'password' : 'text';">?</button>Nice… thanks. But it will not change the Eye icon 🙂