How to create watermark text for textbox in javascript

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Watermark Textbox Using JavaScript</title>

<script language="javascript" type="text/javascript">
 
function WaterMark(txtName, event)
 {
var defaultText = "Enter Username";
if (txtName.value.length == 0 & event.type == "blur") 
{
txtName.style.color = "Gray";
txtName.value = defaultText;
}
if (txtName.value == defaultText & event.type == "focus") 
{
txtName.style.color = "blue";
txtName.value = "";
}
}
</script>



</head>
<body>
<form id="form1" runat="server">
<div>
<b>UserName:</b>
<asp:TextBox ID="txtUserName" runat="server" Text="Enter Username" ForeColor="Gray" onblur = "WaterMark(this, event);" onfocus = "WaterMark(this, event);" />
</div>
</form>
</body>
</html>