Create watermark text for TextBox in ASP.Net using Javascript

– 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>
&nbsp;</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.

Watermark text for TextBox in ASP.Net
Watermark text for TextBox in ASP.Net

 

Watermark text for TextBox in ASP.Net
Watermark text for TextBox in ASP.Net

I hope this asp.net example how to make a watermark textbox control in asp.net using javascript will help you.

Leave a Reply

Your email address will not be published. Required fields are marked *