In this article I will explain with an example, how to clear TextBox on Focus using jQuery.
Clearing the TextBox's Text on Focus is called Watermarking TextBox.
This article will explain how to clear TextBox on Focus i.e. Watermark TextBox using the FREE ASPSnippets jQuery Watermark plugin.
Download jQuery Watermark Plugin
The FREE ASPSnippets jQuery Watermark plugin can be downloaded using the following link.
Clear TextBox on Focus using jQuery
The following HTML Markup consists of two HTML TextBoxes. The title attribute of both the HTML TextBoxes have been set to the Watermark Text to be displayed in them.
Inside the jQuery document ready event handler, the FREE ASPSnippets jQuery Watermark plugin has been applied to both the TextBoxes.
Note: The FREE ASPSnippets jQuery Watermark plugin has an optional property WaterMarkTextColor and using this property one can set a desired color of the Watermark text.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="Scripts/WaterMark.min.js"></script>
<script type="text/javascript">
$(function () {
//Default usage.
$("#FirstName").WaterMark();
//Change color of Watermark.
$("#LastName").WaterMark(
{
WaterMarkTextColor: '#ff0000'
});
});
</script>
<table>
<tr>
<td>First Name:</td>
<td><input id="FirstName" name="FirstName" title="Enter First Name" type="text" value="" /></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input id="LastName" name="LastName" title="Enter Last Name" type="text" value="" /></td>
</tr>
</table>
Screenshot
![Clear TextBox on Focus using jQuery]()
Browser Compatibility
The above code has been tested in the following browsers.
![Internet Explorer]()
![FireFox]()
![Chrome]()
![Safari]()
![Opera]()
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
