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

Answer 1

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.