Last updated on March 7th, 2022 at 06:00 pm
Show or hide password inside input field using Javascript
Have you ever imagined how to display text inside a password input field to the users so that they can crosscheck whether they have entered the right password? I hope you might have noticed in Facebook mobile web page where they have a SHOW / HIDE button to next to password field. Similar to that now a days almost all website has this option.
Ever wondered how they do that? It is the same logic that we are going use Idea behind is to change input field type using Javascript from PASSWORD to TEXT and vice versa.
In HTML part we have a password input field along with 2 buttons. One is “Show Password” button and other is “Hide Password” which is hidden by default.
<body>
Password:<input type="password" value="" id="mypass"><br>
<input type=button id="show" value="Show Password" onclick="PasswordToText()">
<input type=button style="display:none" id="hide" value="Hide Password" onclick="TextToPassword()">
<body>
Now we need the help of Javascript to switch between input field “text” and “password type. There are two functions below one is switching to text and another is switching back to password.
function PasswordToText()
{
if(document.getElementById("mypass").value!="")
{
document.getElementById("mypass").type="text";
document.getElementById("show").style.display="none";
document.getElementById("hide").style.display="block";
}
}
function TextToPassword()
{
if(document.getElementById("mypass").type == "text")
{
document.getElementById("mypass").type="password"
document.getElementById("show").style.display="block";
document.getElementById("hide").style.display="none";
}
}
PasswordToText() as the name say convert password to text which is readable.
TextToPassword() convert text which is shown in the password field to asterisk (*)
The lines after the type conversion are for DOM Style display mainly to Show/Hide buttons.
document.getElementById("show").style.display="block";
document.getElementById("hide").style.display="none";
Find the entire script below. Just copy paste to an HTML file and run it on any browser to see it in action.
<script>
function PasswordToText()
{
if(document.getElementById("mypass").value!="")
{
document.getElementById("mypass").type="text";
document.getElementById("show").style.display="none";
document.getElementById("hide").style.display="block";
}
}
function TextToPassword()
{
if(document.getElementById("mypass").type == "text")
{
document.getElementById("mypass").type="password"
document.getElementById("show").style.display="block";
document.getElementById("hide").style.display="none";
}
}
</script>
<body>
Password:<input type="password" value="" id="mypass"><br>
<input type=button id="show" value="Show Password" onclick="PasswordToText()">
<input type=button style="display:none" id="hide" value="Hide Password" onclick="TextToPassword()">
</body>
admin