The more I explore JQuery, the more I get impressed with its power and flexibility. With classic JavaScript what you are writing with ten lines of code. The same functionality you can achieve with JQuery in fewer lines. This is the one good reason I prefer to user JQuery in my projects. Today I will explain you how to create watermark textbox with JQuery.
It’s really simple to create a watermark textbox, and you not need to write down number of line of codes. So let’s get started.
Create a simple HTML page either in visual studio or notepad. I prefer to use visual studio. On your HTML page add script tag and give path to your JQuery script file.
<script src=”script/jquery-1.4.1.js” type=”text/javascript”></script>
Add two labels and textboxes on your page, as shown below.
<div> <label>Enter first name</label> <input type=”text” id=”txtfname” style=”width:200px;font-size:11px;border:solid 1px” value=”Enter first name” /> <br /> <label>Enter last name</label> <input type=”text” id=”Text1″ style=”width:200px;font-size:11px;border:solid 1px” value=”Enter last name” /></div>
Watermark textbox will show a default message until unless user not provides an input. This looks good as it provides information to the user that in the textbox what he is going to write. It makes your website more users friendly. We will add JavaScript tag inside our head section. And call the ‘document.read’ function. Inside the function we will check the focus on input textbox. In the example we are using only two textboxes so I am using ‘Select by Element’ technique. But if you want to apply watermark on any specific textbox you can call if by its Id, or you can create a class and apply that class on the textboxes you want to mark as watermark. We added a default value in our example like ‘Enter first name’, so when page loads or user not type anything a default value will appear.
$(“input”).focus(function() {
if ($(this).val() == this.defaultValue) {
$(this).val(“”);
}});
We add a focus event on the input boxes and check the textbox value. In JQuery Val is used to get and set the values. So this is it, our watermark textbox is ready. And as you can see we add the focus by calling ‘DOM Element’ so this focus function applies to both textboxes. But there is one problem when the focus is out and user didn’t type anything in the textbox we should display back the default value. So on focus out we will write down a function and check if nothing is typed in the textboxes placed the default value back.
$(“input”).blur(function() {
if ($.trim($(this).val()) == “”) {
$(this).val(this.defaultValue);
}});
.blur is the function in JQuery used for focus out. We will trim the value so if any space is entered we will remove that and check the value in the textbox. If it’s empty, set the textbox default value again. The complete source code of this post is written below.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” >
<head>
<title>Welcome to JQuery</title>
<script src=”script/jquery-1.4.1.js” type=”text/javascript”></script>
<script type=”text/javascript”>
$(document).ready(function() {
$(“input”).focus(function() {
if ($(this).val() == this.defaultValue) {
$(this).val(“”);
}});
$(“input”).blur(function() {
if ($.trim($(this).val()) == “”) {
$(this).val(this.defaultValue);
}});
});
</script>
<style type=”text/css”>
div{text-align:center;background-color:steelblue;width:400px;height:150px;padding-top:15px;padding-left:20px;}
label{padding-right:5px;width:80px;text-align:left;padding-bottom:5px;font-size:15px;font-weight:bold;}
input{font-size:12px;font-style:italic;}
</style>
</head>
<body>
<div>
<label>Enter first name</label>
<input type=”text” id=”txtfname” style=”width:200px;font-size:11px;border:solid 1px” value=”Enter first name” />
<br />
<label>Enter last name</label>
<input type=”text” id=”Text1″ style=”width:200px;font-size:11px;border:solid 1px” value=”Enter last name” />
</div>
</body>
</html>