Toggle password visibility using JavaScript

Mohammed Imtiyaz Apr 21, 2016

Hiding passwords visibility in web forms helps protect from people looking over your shoulder and reading your password, but greatly increases in the likelihood that someone will enter the wrong one.

Live Demo

In this tutorial you will learn to show and hide password on a web page using JavaScript.

Web Form

Here’s a simple form with a password. I’ve also added a checkbox users can click to reveal or hide their password.

<!DOCTYPE html>
    <title>Toggle password visibility using JavaScript</title>
    <label id="lblPassword">Enter Password</label>
    <input id="txtPassword" type="password" class="form-control" />

    <input id="checkbox1" type="checkbox" onclick="ShowHidePassword(this)" />
    <label id="lblShowPassword">Show Password</label>

How this is going to work

When a user checks the Show Password checkbox, the password field change it’s type from password to text. If they uncheck the box, it will switch back to password.

Yea, it’s really that simple!


Copy and paste the JavaScript code in you web form under head tag.

<script language="javascript" type="text/javascript">
function ShowHidePassword(obj) {
	if (obj.checked) {
    	document.getElementById('txtPassword').type = 'text';
        document.getElementById('lblShowPassword').innerHTML = 'Hide Password';
	else {
		document.getElementById('txtPassword').type = 'password';
		document.getElementById('lblShowPassword').innerHTML = 'Show Password';