Changing type of a textbox from text to password using javascript

arunpthampi

Rate me:

2.50/5 (2 votes)

21 Jul 2010CPOL

23.8K

Case may come when your client demand PASSWORD HERE to be displayed in readable format in your textbox for password

JavaScript

<html>
<head>
<title>Type of textbox from text to password</title>
<script type="text/javascript" language="javascript">
function trial()
{
    document.getElementById("txtTempBox").style.display="none";
    document.getElementById("txtPassword").style.display="";
    document.getElementById("txtPassword").focus();
}
</script>
</head>
<body>
<input type="text" id="txtTempBox" name="txtTempBox" value="Password Here" onfocus="trial();"/>
<input type="password" id="txtPassword" name="txtPassword" style="display:none;"/>
</body>
</html>

Note1 : 'type' property of textbox control, if we are trying to set it from 'text' to 'password' on an event like onfocus or onenter,it fails in IE and some other browsers. So this is the only easy method to get the work done.

Note2 : We can use 'display' and 'visibility' property of textbox style to make the textbox hidden. But if we are using 'visibility:hidden' then the textbox will be taking the space though invisible creating design issues..so only way is to go for 'display:none'.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

arunpthampi

United States

This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Changing type of a textbox from text to password using javascript

License

Comments and Discussions