Watermark for username and password using Javascript

Watermark for username and password using Javascript

Javascript for creating watermark. You can use this script for creating watermark effect in username and password.
There are many ways of creating watermark effect using AjaxToolKit, Javascript etc.
But when there is a choice between Javascript and other technology, I will always prefer Javascript.
When you create watermark effect using Ajax Toolkit then password field shows "*" and not text e.g "Password"
This is because you cannot write text in unencrypted form when textmode is password. But you can do this thing using Javascript.

<!--Put this code in Head Section -->

<script language='Javascript' type='text/Javascript'>
//<![CDATA[
function changeUsername() {
document.getElementById('divUsername').style.display = '';
document.getElementById('divDummyUsername').style.display = 'none';
document.getElementById('<% =txtEmail.ClientID %>').focus();
}
function changePassword() {
document.getElementById('divPassword').style.display = '';
document.getElementById('divDummyPassword').style.display = 'none';
document.getElementById('<% =txtPassword.ClientID %>').focus();
}
function restoreUsername() {
if (document.getElementById('<% =txtEmail.ClientID %>').value == '') {
document.getElementById('divUsername').style.display = 'none';
document.getElementById('divDummyUsername').style.display = '';
}
}
function restorePassword() {
if (document.getElementById('<% =txtPassword.ClientID %>').value == '') {
document.getElementById('divPassword').style.display = 'none';
document.getElementById('divDummyPassword').style.display = '';
}
}
//]]>
</script>

<!--Put this code between body Section -->
<div id="divUsername">
<asp:TextBox MaxLength='50' Width='100px' onblur="restoreUsername()" ID='txtEmail' runat='server'>
</asp:TextBox>
</div>
<div id="divDummyUsername">
<asp:TextBox MaxLength='50' Width='100px' onfocus="changeUsername()" Text="Username" ID='txtDummyEmail' runat='server'>
</asp:TextBox>
</div>
<div id="divPassword">
<asp:TextBox MaxLength='50' Width='100px' TextMode="Password" TabIndex="2" ID='txtPassword' runat='server' onblur="restorePassword()"></asp:TextBox>
</div>
<div id="divDummyPassword">
<asp:TextBox MaxLength='50' Width='100px' TabIndex="2" ID='txtDummyPassword' runat='server' Text="Password" onfocus="changePassword()"></asp:TextBox>
</div>
<div>
<input id="HDPassword" runat="server" type="hidden" />
</div>

<!--Put this code at the bottom of page before body tag -->
<script language="Javascript" type="text/Javascript">
if (document.getElementById('<% =HDPassword.ClientID %>').value != '' && document.getElementById('<% =txtPassword.ClientID %>').value == '') {
document.getElementById('<% =txtPassword.ClientID %>').value = document.getElementById('<% =HDPassword.ClientID %>').value;
document.getElementById('divPassword').style.display = '';
document.getElementById('divDummyPassword').style.display = 'none';
}
else {
document.getElementById('divPassword').style.display = 'none';
document.getElementById('divDummyPassword').style.display = '';
}
if (document.getElementById('<% =txtEmail.ClientID %>').value == '') {
document.getElementById('divUsername').style.display = 'none';
document.getElementById('divDummyUsername').style.display = '';
}
else {
document.getElementById('divUsername').style.display = '';
document.getElementById('divDummyUsername').style.display = 'none';
}
</script>