– Create watermark text for TextBox in ASP.Net
– Create watermark text for TextBox in Javascript
In this post we will learn to set watermsrk text apply on TextBox control in ASP.Net using the JavaScript.
We will tack asn example to understand how to make a watermark text for textbox control using javascript in asp.net c#.
There are many method to set watermark text on TextBox.
– Using StyleSheet
– Using JavaScript
– Using JQyery
– Here we are learn set watermark text for TextBox using Javascript.
Write Below javascript code in your Head tag:-
<head runat=”server”>
<title>Watermsrk TextBox Using ASP.Net</title>
<script language=”javascript” type=”text/javascript”>function WaterMarktxt(txtName, event)
{
var defaultText = “Enter FirstName !”;if (txtName.value.length == 0 & event.type == “blur”)
{
txtName.style.color = “DimGray”;
txtName.value = defaultText;
}if (txtName.value == defaultText & event.type == “focus”)
{
txtName.style.color = “black”;
txtName.value = “”;
}
}
</script>
</head>
Now Write below code in your Body tag for asp.net web forms design:-
<body>
<form id=”form1″ runat=”server”>
<div>
</div>
<table style=”z-index: 100; left: 440px; width: 256px; position: absolute; top: 144px; height: 136px”>
<tr>
<td style=”height: 37px”>
FirstName</td>
<td style=”height: 37px”>
<asp:TextBox ID=”txtUserName” runat=”server” Text=”Enter FirstName !” ForeColor=”DimGray” onblur = “WaterMarktxt(this, event);” onfocus = “WaterMarktxt(this, event);” BackColor=”LavenderBlush” BorderColor=”Black” BorderStyle=”Solid” BorderWidth=”1px” Height=”24px” />
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button ID=”Button1″ runat=”server” Text=”SAVE” Width=”80px” Font-Bold=”True” Height=”40px” />
</td>
</tr>
</table>
</form>
</body>
The asp.net out put of how to create a watermark text for textbox in asp.net using javascript.
I hope this asp.net example how to make a watermark textbox control in asp.net using javascript will help you.