Introduction:
This tutorial goes over how to watermark a text box. This comes in very handy if you want to label what a text box's purpose is, but do not want to use additional space on your layout to do so with text. This also aid's in keeping your design looking cleaner.
Ex:
Some Notes:
The first thing to note is the HTML placeholder variable is a HTML5 addition. It did not exist in previous versions. This means it will only work in newer browsers that support HTML5, which creates a bit of an issue, considering how many users do not have an HTML5 browser. I will show you how to fix this later on in the tutorial, and make it look the same as the placeholder variable.
Step 1(The Text Box):
Create your text box that you wish to add a place holder to. In this example we will build a search box. Most everybody should be familiar with the basic HTML needed to create a text box:
<input type="text" name="search" />
Step 2(Adding The Placeholder):
Now we need to add the code for the placeholder effect for HTML5 browsers:
<input type="text" name="search" placeholder="Search here..." />
As you can see we have added a new variable inside <input>. Any value entered inside the double quotes of placeholder will be what shows up on the page, regardless of the browser version(HTML5 or previous versions).
At this point ONLY HTML5 browsers will be able to use the placeholder variable. We now need to explain to all the lesser browsers what to do when they encounter this inexplicable variable.
Step 3(Include jQuery):
You will need to add the jQuery code to our document. So add the following into your <head>:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
Step 4(Checking Browser Support):
OK now we have the jQuery loaded, so lets do something with it. Next were going to check if the browser visiting the page has support for the placeholder variable, or if were gonna have to fake it. Everything below will need to be inside a <script> tag. Do not close it at this time, we will do so later on.
jQuery(function() {
jQuery.support.placeholder = false;
test = document.createElement('input');
if('placeholder' in test) jQuery.support.placeholder = true;
});
The above code adds placeholder to the jQuery .support objects list.
Step 5(Faking The Placeholder Effect):
Now were getting to the faking part. We now know if the browser is supporting placeholder. If it isn't, the browser is going to execute this code wherever it fines a 'placeholder' variable. This code is still inside the <script> tag. We will end the <script> tag at the end of our code below:
$(function() {
if(!$.support.placeholder) {
var active = document.activeElement;
$(':text').focus(function () {
if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
$(this).val('').removeClass('hasPlaceholder');
}
}).blur(function () {
if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
$(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
}
});
$(':text').blur();
$(active).focus();
$('form:eq(0)').submit(function () {
$(':text.hasPlaceholder').val('');
});
}
});
</script>
Step 6(Make It Look Identical):
We now have the placeholder variable faked. But wait, IT DOESN'T LOOK THE SAME, YOU SAID IT WOULD!! That is true, lets fix it. Add the following code inside your <head>, after </script> tag. If you look at our code above, we have added a class named 'hasPlaceholder'. This allows us to apply CSS styling to the fake text.
<style>
.hasPlaceholder {
color: #777;
}
</style>
The color value #777 or #777777, will apply the default placeholder color that is used in HTML5 browsers, thus making it look the same.
The Complete Code:
If you followed the guide correctly you should now have the following code:
<html>
<head>
<title>Placeholder Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
// This adds 'placeholder' to the items listed in the jQuery .support object.
jQuery(function() {
jQuery.support.placeholder = false;
test = document.createElement('input');
if('placeholder' in test) jQuery.support.placeholder = true;
});
// This adds placeholder support to browsers that wouldn't otherwise support it.
$(function() {
if(!$.support.placeholder) {
var active = document.activeElement;
$(':text').focus(function () {
if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
$(this).val('').removeClass('hasPlaceholder');
}
}).blur(function () {
if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
$(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
}
});
$(':text').blur();
$(active).focus();
$('form:eq(0)').submit(function () {
$(':text.hasPlaceholder').val('');
});
}
});
</script>
<style>
.hasPlaceholder {
color: #777;
}
</style>
</head>
<body>
<input type="text" name="search" placeholder="Search here..." />
</body>
</html>
Conclusion:
This will now work in any browser supporting both CSS and Javascript(which in theory should be all of them).
Please post if you have encountered any issues or glitches with the above code or if you have questions on modifying or extending it.
This page was published on It was last revised on
