Cross-Browser Support for HTML5 Placeholder Text in Forms

Published November 29, 2010 by Rob Glazebrook.

HTML5 offers a lot of exciting new features in the realm of forms. One of my favorite new additions to forms in HTML5 is the placeholder attribute. Placeholder text is the “hint” or “example” text that resides in a text input field before the user clicks in (or tabs to) that field — and goes away the moment the field is in use. And the code is amazingly simple, too. Take this example:

 <input type="text" placeholder="Start typing to begin searching." />

The only new bit is the placeholder attribute, but it results in this:

I love placeholder text because it can help make large, complex forms easier to navigate. What better place to explain the requirements of an input field than right inside the field itself? And on short forms (like a search bar), placeholder text could be used instead of a field label, making your form that much more compact (though the W3C still suggests you use a label field).

The only real downside to placeholder text, as I see it, is I can’t use it right now … or at least, it won’t show up everywhere. Placeholder text is supported by Firefox 3.7+ and Chrome/Safari 4.0+, but Opera is late to the party and Internet Explorer is, as usual, conspicuously absent. The good news is those browsers won’t break if they encounter a placeholder attribute: they’ll just ignore it entirely. But if you were planning to use placeholders to relay important information to your users, that omission might be enough to make you call the whole thing off.

I’m a notoriously impatient person, and I don’t like to miss out on cool new functionality just because Aunt Gertrude can’t be convinced to switch away from Internet Explorer. So I suggest this as a workaround for the time being: let’s use placeholder text NOW, for all browsers that support it, and fake the same functionality for legacy browsers.

Use Placeholder Text Now

This is the easy part. For modern browsers, all we have to do is start using the placeholder attribute, and everything will work automatically. So this:

 <input type="text" placeholder="Start typing to begin searching." />

Becomes this:

Easy as pie.

All Browsers That Support It

As I said earlier, as of the time of this writing, placeholder text is supported by Firefox 3.7+ and Chrome/Safari 4.0+. However, this will inevitably change over time, so we shouldn’t rely on these data to make our implementation decisions. Besides, browser sniffing is SO 20th century. Instead, we’ll write a bit of jQuery to find out whether the user’s browser supports the placeholder attribute. This way, as soon as IE or Opera decide to come join the fun, placeholders on your site will just magically work without any additional help from us.

This code will do the trick:

 jQuery(function() {
	jQuery.support.placeholder = false;
	test = document.createElement('input');
	if('placeholder' in test) jQuery.support.placeholder = true;
});

What I’m doing here is extending the jQuery.support object, just like we did when we tested for border-radius support. I’m using JavaScript to create a new input object, and then I’m testing to see if the “placeholder” attribute is an option inside that object. It will be an option in browsers that support placeholder text, and absent in those that don’t.

Once we’ve run that code, we’ll be able to check against the jQuery.support object, like so:

 if(!$.support.placeholder) {
// Placeholder text is not supported. 
}

Fake the Same Functionality

So now we just need to get the other browsers to behave the same way. And I discovered something that will make our job easier: even if the user’s browser doesn’t recognize the placeholder attribute, the jQuery running inside that browser will still find it just fine! So we can use the placeholder element in our jQuery. This means we don’t have to do anything fancy to the input element to make it work.

The following code looks a little complicated (and it is, logic-wise), but it does the trick.

 $(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').submit(function () {
			$(this).find('.hasPlaceholder').each(function() { $(this).val(''); });
		});
	}
});

The first thing we’re doing is finding out if there’s a form element currently selected (which would be automatically selected when the page loads). If so, we store it in the “active” variable, so we can set it special later. Next, we create two event functions for our elements (I’m targeting “text” inputs, but you could expand/contract this as you need): a focus function (for when the element gets clicked in/tabbed to) and a blur element (for when the user goes elsewhere).

The blur function first checks to see if the input element has a placeholder set, and if it does, if the value of the input’s value is either blank (the user didn’t enter anything before moving on) or if it’s the same as the placeholder text. If so, we know that we’re supposed to be applying a placeholder on blur. So we set the value (content) of the input to be the same as the placeholder text, and we add a class of “hasPlaceholder” to the input so we can style it to look like placeholder text.

The focus function first checks to see if the element has a placeholder set, and if it does, if the current “value” of the input area is the same as the placeholder text. If so, that means that the user just clicked into an input field that has our fake placeholder applied. So we blank out the input’s value field and remove the “hasPlaceholder” class.

Then we do a few more housekeeping things. We’re running the “blur” function on all our fields when the page loads, which adds placeholders wherever they need to be. We then re-focus the originally active field, which would remove the placeholder from that particular field and move the cursor there. And we have a final function that fires on form submission, which strips out the value fields of any fields that have the “hasPlaceholder” class applied. This prevents us from accidentally sending along our faked placeholder copy as an actual user input.

And how do we style our input’s new faked placeholder copy to make it look like a real placeholder? It turns out that placeholder styling isn’t that complicated on average, so it doesn’t take much work:

 .hasPlaceholder {
	color: #777;
}

And with that, you have placeholders that work in ALL modern browsers, not just the fancy ones! You can see a demo here. Give it a try in various browsers.

115 Responses

  1. free instagram followers (reply)

    Primarily free instagram followers forms believe in one of many persons.
    This develops stonger every day. The particular dictionary specifies economics seeing
    that ‘the cultural scientific disciplines focused on the generation,
    distribution, trade, and also consumption of merchandise in addition to
    services’. We shall start by means of considering
    the particular Maiden-Tuesday-Lending type, i always hope is going to be
    comfortable to the majority followers.
    Awareness

    free instagram followers, The outcome displayed from the graph are as well crystal clear being ignored.
    Certainly interest are not able to sustain this specific
    instability intended for lengthy. Assumptions
    created by traders have triggered uncertainty amongst the exclusive sector.
    State policies seemed to be once a game showcasing competition
    by high level lessons. Thinking about the actual range symbolized
    by way of sole politics get together could be reminiscent of comparing free of charge instagram followersilisation, seeing that it truly
    is turn out to be recognized, as well as someone’s own sense connected with morality.

  2. Shannon (reply)

    hello!,I really like your writing so much!

    proportion we communicate more about your article on AOL?

    I require an expert in this area to solve my problem.

    May be that is you! Having a look ahead to see you.

  3. naruto cosplay (reply)

    Are you currently relaxing in a relaxed manner?
    Several an afternoon have been liked with a family, developing above the dialogue involving naruto cosplay.

    Extremely naruto cosplay is heralded by shopkeepers in addition to purchase bankers the same, primary many to state that we now have hardly sufficient
    blues music revealed naruto cosplay.
    That nevertheless gets the capacity to jolt and so known as
    ‘babies’, the majority of which neglect to recognize the entire
    range regarding naruto cosplay. Rest, relax
    in addition to gasp as i exhibit the rich tapestries connected with naruto
    cosplay.

  4. Pingback: [RESOLVED]Switching Placeholder Text with Entered Text | ASP Questions & Answers

  5. Pingback: [RESOLVED]Switching Placeholder Text with Entered Text | ASP Web Form Data Control

  6. Pingback: [RESOLVED]Switching Placeholder Text with Entered Text | ASP.NET MVC

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>