A placeholder for incapable browsers

One of my favorite new features of HTML5 is the placeholder attribute. Although it is no big deal, it has made forms much easier to handle and more light-weight. Where you earlier had to use the value attribute (or the label tag) instead and clear it with JavaScript at a user interaction, now the HTML5 pendant gets the job done. But there still is a pitfall: Yep, the browsers that don’t support it, with the Internet Explorer family leading the way.

Since I build many forms at my job I often had to deal with this issue in the past. My previous “solution” was to use the placeholder attribute not at all, but recently I reconsidered this behavior and wrote a little script that overcomes this issue. It involves Modernizr on the one hand to check if there is placeholder support within the browser. On the other hand I use jQuery to search for the placeholder attribute at each form field and substitute it with a value attribute in case the browser doesn’t support it.

The script

For preparation you have to grap yourself a copy of jQuery and Modernizr and include them into the page. For the latter a custom build with “Input Attributes” checked is needed. To get started with the script let’s first check with Modernizr if the placeholder funtionality is available:

if (!Modernizr.input.placeholder) {

If not, all of the following should be performed. After that we make use of jQuery’s each() method to loop through all occurrences of the placeholder attribute within the form:

$('form').find('input[placeholder]').each(function() {

Then, for a better overview, the $this selector (namely the currently selected element within the each loop) and the content of the current placeholder attribut are cached within variables:

var $this = $(this),
    placeh = $this.attr('placeholder');

After that various methods are chained together and applied to the current element within the loop (namely $this):

$this
	.val(placeh) // 1
	.addClass('placeh') // 2
	.focus(function() { // 3
		if($(this).val() == placeh) $(this).removeClass('placeh').val(''); // 4
	}).blur(function() { // 5
		if($(this).val() == "") $(this).addClass('placeh').val(placeh); // 6
	});

The content of the placeholder attribute is applied as the value of the field.
A class (placeh) is added, which makes the value attribute look like the native placeholder attribute.
As soon as the form field gains focus (the users interacts with it) …
… it is checked if the filler text was not yet changed (therefore the attributes of the new set value and the default placeholder are still the same). If yes, the class from (3) is removed and the field emptied.
When the user leaves the form field …
… a detection is performed, that checks if the field is empty, therefore the user has just clicked and left the field without entering anything. If that’s the case the class from (3) is applied and the placeholder text inserted again.

That’s it. Simple and straight to the point. You can grab the script here. However for this version I have made two small adaptions: I’ve wrapped everything into a self evoking function (line 1) to avoid creating global functions; and at line 5 the form whereon the script gets applied can be indicated. Have fun!

Example

Open this article with a browser not capable of displaying the placeholder attribute (e.g. any version of Internet Explorer except 10), click into the following form field and enter something. For the supported browsers the placeholder attribute is displayed, for the rest it gets substituted by the value attribute with the same value. Also try to leave the field without changing anything.

JoeFlash
You might get better performance from the script if you defined exactly what you wanted in the first statement, rather than keep adding filtering options.

Original:
```
var theForm = $('article').find('form');
theForm.find('[placeholder]').each(...);
```
Suggested:
```
$('article input[placeholder]').each(...);
```
This should reduce processing iterations and loops that are not necessary. You also do not need to find the form tag, just the inputs that have a placeholder defined.

http://www.css3files.com Christian Krammer

Yeah, you are right. To add the input tag for more specificity is a good idea. I’ve added the form tag before so that the script hasn’t to search in the whole article but only the form, which should also be good for performance, right?

Thanks for the tip!

Taudris
Use this line instead:
```
if($(this).hasClass('placeh')) $(this).removeClass('placeh').val(''); // 4
```
That way the user can enter “I’m a placeholder” without problems. This is presumably a non-issue for the vast majority of uses, but you never know.

http://www.css3files.com Christian Krammer

Thanks for the tip, I will have a look at it. And sorry for the late reply.

http://www.facebook.com/santoshgpt Santosh kumar

not working in chrome

http://www.css3files.com Christian Krammer

Maybe you get something wrong: The script isn’t meant for Chrome, since this browser has the placeholder functionality built-in for a long time. The script only is executed for Internet Explorer versions < 10.

Apart from that: When clicking on the example input field above in Chrome, please enter a few characters and the placeholder text should disappears. Maybe you didn’t notice that you actually have to enter something?