Creating Watermark TextBox in ASP.Net using JQuery
We can use watermark textbox to let the users know about the purpose of the textbox i.e. it serves as help text to the users on what to type in. In internet, most of the websites will have search textbox as watermark textbox.
The following code snippet will help us to implement similar watermark textbox with asp.net textbox control and JQuery library.
Read my article Using JQuery in ASP.Net AJAX Applications - Part 1 to know more about JQuery and integrating it to ASP.Net AJAX application.
<head>
<script src="_scripts/jquery-1[1].2.6.js" type="text/javascript"></script>
<script language="javascript">
$(document).ready(function() {
var watermark = "Type your query..";
if ($("#txtSearch").val() == "") {
$("#txtSearch").val(watermark);
}
$("#txtSearch").focus(function() {
if (this.value == watermark) {
this.value = "";
}
}).blur(function() {
if (this.value == "") {
this.value = watermark;
}
});
});
</script>
</head>
<asp:TextBox ID="txtSearch" runat="server" ></asp:TextBox>
Read the other JQuery snippets here.
|