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