A simple show / hide password function using Javascript.


We all know that password boxes in any web/desktop applications are masked with an asterisk (*) to protect it from being exposed to others while you type it. But sometimes have you noticed that when you enter your password to connect to a Wi-Fi network, there is a check-box which allows you to view the password that you typed in plain text? That is to make sure
you have entered your password correctly, so you can connect to the network in the first attempt.

I think it's a nice feature to have in any application. But in terms of security, it will not be nice :-)

Anyway, I just liked it and I wanted to make a little login page with that option included. Here is the Javascript function. It's too simple. I'm not even thinking to include this feature in any of my real applications though :-)

Note : Having your password exposed to someone else will make dangerous things happen! Therefore you should never let anybody know your passwords of important and private accounts like Gmail, Facebook etc. A person can even guess your password by looking at the keyboard while you type, and the number of asterisks that appear in the password box. Therefore be conscious.

Here is the code.

Pasword : <input type="password" name="password" id="password" />

<br/>

<input type="checkbox" value="1" name="reveal" id="reveal" onchange="reveal_pass(this); "> Show Password

<script type="text/javascript">

function reveal_pass(check_box){

    var textbox_elem = document.getElementById("password");

    if(check_box.checked)

    textbox_elem.setAttribute("type", "text");

    else

    textbox_elem.setAttribute("type", "password");

}

</script>



Here is a Demo :-)

Pasword :
Show Password


What do you think about the protection of your passwords? Do you think this is a good idea or a bad idea?

1 comments :