Browser Compatibility Problem Solved !!

In some web sites need to enter the password to log in. And when you type the password, it will display as dots.(Instead of showing the password characters). This password mask will done by the changing input field type.
------------------------------------------------------------------------------
<input name="pw" value="" type="passowrd"/>
------------------------------------------------------------------------------
This will appear normal input field in a html page. But, when you type something on it, it will show as dots.
But, we need to display the text "Password" inside this box and when user click on this, the text should clear. Clearing stuff can be done by java script easily. But problem is this.

If we need to display the text inside the text box, we can do this.
--------------------------------------------------------------------------------
<input name="pw" value="Password" type="passowrd" />
--------------------------------------------------------------------------------
ohhhh... Then it will display as dots !!!

Then what can I do ? One option is change the type from "text" to "password" from java script..
Yes. It works on Firefox. But on internet explorer ???

What a ugly browser is ? IE doesn't support on this dynamic field change !!! Then try to clone nodes and replace parent. It works, but reverse is not !!!

This is the simplest solutioncc to over come in such problems... Use dummy field !!!

----------------------------------------------------------------------------

<input name="pwd_dummyfield1" style="width: 140px;" id="pwd_dummyfield1" value="Password" onfocus="changePassword(true,'passWord_-3','pwd_dummyfield1');" type="text">

<input name="passWord_-3" style="width: 140px; display: none;" id="passWord_-3" onblur="changePassword(false,'passWord_-3','pwd_dummyfield1');" type="password">

<script type="text/javascript">
function changePassword(change,id,dummyid)
{
var dummy = document.getElementById(dummyid);
var actual = document.getElementById(id);

if(change)
{
dummy.style.display = 'none';
actual.style.display = 'block';
actual.focus();
}
else
{
if(actual.value.length == 0)
{
dummy.style.display = 'block';
actual.style.display = 'none';
}
}
}
</script>
-------------------------------------------------------------------------------------