javascript - 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.