how to use HTML5 placeholder attribute with backward-compatibility in mind?

Question

I'd like to use HTML5's placeholder attribute (You can see it in cation in the newsletter at Thought Results). But when I use older browsers, of course, they don't render anything. I can use JavaScript to imitate it, but then, I shouldn't use it and it's done the old way. How can I have both HTML5 placeholder attribute, and at the same time simulate it for older browsers?

Answer 1

You can detect if a browser supports the attribute:

http://diveintohtml5.info/detect.html#input-placeholder

function supports_input_placeholder() {
    var i = document.createElement('input');
    return 'placeholder' in i;
}

If it does, do nothing. If it doesn't, you can use JS to grab the placeholder value and then insert it into the field as you see fit (perhaps as default value) and then add the appropriate interactions to simulate the HTML5 placeholder behaviors.

Answer 2

@marcgg wrote a great JQuery placeholder plugin that basically replicates the placeholder functionality for those browsers that don't support it.

https://github.com/marcgg/Simple-Placeholder

I searched through a lot of placeholder plugins before settling on this one and it works great so far. Originally found it in response to this similar question:

https://stackoverflow.com/questions/5120257/what-is-the-best-html5-placeholder-like-jquery-plugin-out-there

Answer 3

I recommend using Modernizr to detect this feature.

if (Modernizr.input.placeholder) {
  // your placeholder text should already be visible!
} else {
  // no placeholder support :(
  // fall back to a scripted solution
}

If you're not interested in using this library you could use the following the code.

function supports_input_placeholder() {
    var i = document.createElement('input');
    return 'placeholder' in i;
}

Regarding to fallback support, if you're using jQuery you could use Simple Placeholder, which had its origin here at StackOverflow.