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].

Toggle-the-Visibility-of-Password-Field-with-Eye-Icon

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. view 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.

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.!

We respect your privacy. Your information will not be shared with any third party and you can unsubscribe at any time.
You can support this website by sharing. Thank you!DhirajCSS - Cascading Style SheetsHTMLJAVASCRIPTjQueryMobile Web TechnologyTutorialsadvance web technology,animated card,Animated image,animation delay,animation direction,bootstrap,configurable settings,CSS,CSS 3,css animation,css effects,CSS framework,css transform,css3,css3 box shadow,CSS3 transitons,doctype html,free open source,gaming,graphical user interface,grid system,html5,interactive form,interactive web applications,javascript,javascript functions,mobile,open source javascript,random transition,smooth transitions,software,style,transform 3d,transition effects,transparent background image,visual transitionNowadays, 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...Web design / development tutorials covering HTML, jQuery & CSS. Cool tips and tricks of web designing using HTML5, CSS3 & jQuery Library. Latest updates in responsive or mobile web technology.