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?

DA. · Accepted Answer · 2012-08-31T17:03:59.717

9

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.

edited Aug 31 '12 at 17:03

answered Jul 03 '11 at 05:28

DA.

39,848
49
150
213

1

This worked. I just didn't understand the `return 'placeholder' in i;` part. What it technically does? What it means? – Saeed Neamati Jul 03 '11 at 05:46
2

The `in` operator tests if an object (in this case a `HTMLInputElement` object) has a given property. Since browsers that implement the `placeholder` attribute also add the `placeholder` property to the `HTMLInputElement` interface, this is an effective test of support for `placeholder`. – Domenic Jul 03 '11 at 05:53
@Diogo your edit is an entirely new answer. Instead of editing this answer, please create a new one. – DA. Aug 31 '12 at 17:02
@Diogo crap. I guess not. Odd that the system doesn't save that as well. – DA. Aug 31 '12 at 17:32

score 6 · Answer 2 · edited May 23 '17 at 10:29

@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

score 1 · Answer 3 · edited May 23 '17 at 12:02

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.

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

3 Answers3

Linked