Toggle Password input field using Javascript (Show/hide password)

In one of the previous article, I have mentioned RGB to Hex and Hex to RGB using Javascript but now in this article, I have mentioned how we can show or hide password inside input field, with toggle button using javascript.

Idea to show/hide password field text is:

• Create input type = password field, which hides text when user enters it
• Create Javascript function to change, input type from "password" to "text" to show user text
• Use function to toggle back input type from "text" to "password" to hide password again.

Toggle Show/Hide password text using Javascript

So, let's take a look at complete javascript based example first.

Suppose we have HTML as below

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

<input type="password" placeholder="Password" id="password" class="masked" name="password" />
<i class="fa fa-eye" id="eye"></i>

then the JS code to show/hide password text would be as below

function show() {
    var p = document.getElementById('password');
    p.setAttribute('type', 'text');
}

function hide() {
    var p = document.getElementById('password');
    p.setAttribute('type', 'password');
}

var pwShown = 0;

document.getElementById("eye").addEventListener("click", function () {
    if (pwShown == 0) {
        pwShown = 1;	
				document.getElementById("eye").classList.add("fa-eye-slash");
				document.getElementById("eye").classList.remove("fa-eye");
        show();
    } else {
        pwShown = 0;
			  document.getElementById("eye").classList.add("fa-eye");
				document.getElementById("eye").classList.remove("fa-eye-slash");
        hide();
    }
}, false);

In the above code, we have added an EventListener for click on "eye" icon, which will call function on clicking on it.

and using pwShown variable, we are checking if we are showing password as text or not.

If password text is not visible, pwShown will be 0, so we will call show(); function, which will make input type ="password" to input type "text".

Similary, if pwShown is 1 and we call hide() function and convert input type ="text" to input type "password".

Toggle Show/Hide password text using jQuery

We can achieve same thing using jQuery in fewer code, but yes we will have to add jQuery Reference in out HTML page, so considering our HTML with jQuery reference it would be

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

<input type="password" placeholder="Password" id="password" class="masked" name="password" />
<i class="fa fa-eye" id="eye"></i>

and jQuery code to show/hide password text would be

var pwShown = 0;
$(document).ready(function(){

$("#eye").click(function(){
	if(pwShown == 0)
	{
     $("#password").attr('type','text');
		 $("#eye").addClass('fa-eye-slash').removeClass('fa-eye');
		 pwShown = 1;
	}
	else
	{
	  $("#password").attr('type','password');
		 $("#eye").addClass('fa-eye').removeClass('fa-eye-slash');
		 pwShown = 0;
	}

})

})

Output is same above, here is the fiddle using jquery code

Another Pure Javascript way using inline OnClick

This one is easiest method to toggle password visibility using javascript on-click.

<input type="password" id="password" value="YourPassword"/>
<button onclick="if (password.type == 'text') password.type = 'password';
  else password.type = 'text';">toggle</button>

In the above method, we have added onclick function code inside HTML button itself, so when 'password.type=text', we change it to type = 'password', which hides password, otherwise change it back to 'text', making password visible again.

That's it.

You may also like to read:

Create a simple calculator using Javascript

Send email from Javascript

Using Google Translate to translate language using HTML- Javascript.

RGB to Hex and Hex to RGB using Javascript