In my previous article, I’ve given beginner’s introduction on how to use jQuery with ASP.NET applications. You can also see list of ASP.NET+jQuery tutorials. In this tutorial, I am going to explain how to create a TextBox in ASP.NET with some default text or watermark text. This text will be displayed only when the TextBox is empty and out of focus. A typical example can be a Search Box or User Name TextBox. Create a new web form example1.aspx in your asp.net web application project. Add a ASP.NET TextBox control in web form. See below .aspx code for reference:
Source code can be downloaded from GitHub. Comments and suggestions are most welcome. Happy coding!
<asp:TextBox ID="txtName" runat="server" ToolTip="Enter Your Name"></asp:TextBox>
- In the document.ready() event, retrieve the TextBox control using its client id and save in a local variable for further operations.
- On the focus event, check if TextBox contains the default text value. If TextBox contains default text value then clear the TextBox . See below code:
var txtNameBox = $("#<%=txtName.ClientID%>"); txtNameBox.focus(function () { if (txtNameBox.val() == this.title) txtNameBox.val(""); }); - You will notice that I have set ToolTip property of the TextBox. Text (“Enter Your Name”) of the ToolTip property will be displayed as the Watermark text in TextBox. The ToolTip property of the ASP.NET TextBox control is rendered as title at runtime. Therefore, the ToolTip text “Enter Your Name” is retrieved using this.title in above code.
- On the blur event check whether TextBox control is empty or not. If it is empty then add Watermark text to TextBox control. See below code:
txtNameBox.blur(function () { if (txtNameBox.val() == "") txtNameBox.val(this.title); }); - Call the blur event on page load so that the TextBox control will be out of focus initially.
txtNameBox.blur();
Complete Code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>This is method 2</title>
<script src="js/jquery-1.8.js"></script>
<script type="text/javascript">
$(function () {
var txtNameBox = $("#<%=txtName.ClientID%>");
txtNameBox.focus(function () {
if (txtNameBox.val() == this.title)
txtNameBox.val("");
});
txtNameBox.blur(function () {
if (txtNameBox.val() == "")
txtNameBox.val(this.title);
});
txtNameBox.blur();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>This is method 2</h1>
<asp:TextBox ID="txtName" runat="server" ToolTip="Enter Your Name"></asp:TextBox>
</div>
</form>
</body>
</html>
Posts
0 comments :
Post a Comment