Introduction
In this article, I will explain how watermark textbox using JavaScript and CSS is very useful and uses less resources compared to AJAX.
Overview
JavaScript is used to implement TextBox ‘onfocus
’ and ‘onblur
’ event and CSS is used to decorate TextBox
.
Using the Code
a.Bind
the onfucus
event to remove watermark and the onblur
event to decorate textbox as watermark.
<style type="text/css">
.WaterMarkedTextBox
{
height: 16px;
width: 168px;
padding: 2px 2 2 2px;
border: 1px solid #BEBEBE;
background-color: #F0F8FF;
color: gray;
font-size: 8pt;
text-align: center;
}
.WaterMarkedTextBoxPSW
{
background-position: center;
height: 16px;
width: 168px;
padding: 2px 2 2 2px;
border: 1px solid #BEBEBE;
background-color: #F0F8FF;
color: white;
vertical-align: middle;
text-align: right;
background-image: url(Images/psw_wMark.png);
background-repeat: no-repeat;
}
.NormalTextBox
{
height: 16px;
width: 168px;
}
</style>
<script language="javascript" type="text/javascript">
function Focus(objname, waterMarkText) {
obj = document.getElementById(objname);
if (obj.value == waterMarkText) {
obj.value = "";
obj.className = "NormalTextBox";
if (obj.value == "User ID" || obj.value == "" || obj.value == null) {
obj.style.color = "black";
}
}
}
function Blur(objname, waterMarkText) {
obj = document.getElementById(objname);
if (obj.value == "") {
obj.value = waterMarkText;
if (objname != "txtPwd") {
obj.className = "WaterMarkedTextBox";
}
else {
obj.className = "WaterMarkedTextBoxPSW";
}
}
else {
obj.className = "NormalTextBox";
}
if (obj.value == "User ID" || obj.value == "" || obj.value == null) {
obj.style.color = "gray";
}
}
</script>
<body>
<form id="form1" runat="server">
<div>
<h3>
Watermark Textbox using JavaScript and CSS</h3>
</div>
<table>
<tr>
<td>
User Id
</td>
<td>
<asp:TextBox ID="txtUserId" runat="server"
onfocus="Focus(this.id,'User ID')"
onblur="Blur(this.id,'User ID')"
Width="126px" CssClass="WaterMarkedTextBox">User ID</asp:TextBox>
</td>
</tr>
<tr>
<td>
Password
</td>
<td>
<asp:TextBox ID="txtPwd" TextMode="Password"
runat="server" onfocus="Focus(this.id,'')"
onblur="Blur(this.id,'')" Width="126px"
CssClass="WaterMarkedTextBoxPSW" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button ID="Button1" runat="server" Text="Submit" />
</td>
</tr>
</table>
</form>
</body>
History
- 29th May, 2009: Initial post