How to show and hide Password using JavaScript ? Here we talk about your login or signup form, How to build a best user input form ?, Lets Begin...
Every website have login and signup form, These login and signup form contains many fields like First Name, Last Name, Email, Phone and Password etc. These fields are require to fill by the user, User must have to fill Email and Password field.
Sometimes user can enter wrong password and He/She hit the Enter key with his or her wrong password because the user can not see there entered password because of your input type="password" property (Like this *********), So user can not login or signup because of wrong password that he or she entered, So the user be a little bit disappointed.
If you want to provide best user experience for your users you have to add show and hide button into the password field of your login or signup form.
So here i am gonna teach you how you can add password show and hide button into the password field of your login or signup form.
So Let's See...
Need :
Actual Form :
Email :
Name :
Show Password
HTML :
JavaScript :
Every website have login and signup form, These login and signup form contains many fields like First Name, Last Name, Email, Phone and Password etc. These fields are require to fill by the user, User must have to fill Email and Password field.Sometimes user can enter wrong password and He/She hit the Enter key with his or her wrong password because the user can not see there entered password because of your input type="password" property (Like this *********), So user can not login or signup because of wrong password that he or she entered, So the user be a little bit disappointed.
If you want to provide best user experience for your users you have to add show and hide button into the password field of your login or signup form.
So here i am gonna teach you how you can add password show and hide button into the password field of your login or signup form.
So Let's See...
Need :
- First of all you have create a HTML form that contains all the input fields like First Name, Last Name, Email, Phone and Password for Signup form, Or Email or Password for Login Form.
- Create a checkbox for show and hide password.
- Create a JavaScript function that will generate your wishing output. When the user checked the checkbox than the user can see his/her password like this (Before : ***********), (After click Checked : syntax#aman).
Actual Form :
Email :
Name :
Wishing for :Name :
Email :
Name :
Show Password
HTML :
<!DOCTYPE html>
<html>
<body>
<h3>Click the checkbox to Hide or Show the Password....</h3>
<input type = "password" value = "syntax#aman" id = "passtype" >
<input type="checkbox" onclick = "changePassword()">
<b>Show Password</b>
</body>
</html>
<html>
<body>
<h3>Click the checkbox to Hide or Show the Password....</h3>
<input type = "password" value = "syntax#aman" id = "passtype" >
<input type="checkbox" onclick = "changePassword()">
<b>Show Password</b>
</body>
</html>
JavaScript :
<script>
function changePassword(){
var temp = document.getElementById("passtype");
if(temp.type = = = "password"){
temp.type = "text";
}
else{
temp.type = "password";
}
}
</script>
function changePassword(){
var temp = document.getElementById("passtype");
if(temp.type = = = "password"){
temp.type = "text";
}
else{
temp.type = "password";
}
}
</script>
Complete Code :
<!DOCTYPE html>
<html>
<body>
<h3>Click the checkbox to Hide or Show the Password....</h3>
<input type = "password" value = "syntax#aman" id = "passtype" >
<input type="checkbox" onclick = "changePassword()">
<b>Show Password</b>
<script>
function changePassword(){
var temp = document.getElementById("passtype");
if(temp.type === "password"){
temp.type = "text";
}
else{
temp.type = "password";
}
}
</script>
</body>
</html>
Thanks for Reading...<html>
<body>
<h3>Click the checkbox to Hide or Show the Password....</h3>
<input type = "password" value = "syntax#aman" id = "passtype" >
<input type="checkbox" onclick = "changePassword()">
<b>Show Password</b>
<script>
function changePassword(){
var temp = document.getElementById("passtype");
if(temp.type === "password"){
temp.type = "text";
}
else{
temp.type = "password";
}
}
</script>
</body>
</html>
Nice article. Simple, small and easy
ReplyDeleteHey,
ReplyDeleteThanks @Aman Singh Rajawat for this useful article. I loved it
It's very easy to understand this simple JavaScript code. Thanks for sharing this.
ReplyDeleteGood job. Man
ReplyDeleteToo easy and effective.
ReplyDeleteΗowdｙ! I jᥙst want to give ʏou a big thumbs up for your
ReplyDeleteexcellent info you have hre on this post. I'll be returning tto your site for more
soon.