<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'.
