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.