IE9 HTML5 placeholder - how are people achieving this?

Question

I\'m trying to use the placeholder=\"xxx\" attribute in my web application, and I don\'t want to have a special visual for IE9. Can people throw out some good s

Answer 1

We just researched the same thing. We decided on reusing this gist, by Aaron McCall, after making some minor changes. The main advantage is that it's simple, easy to understand code:

1. Remove the kernel and setup_placeholders parts. Just call it immediately in an anonymous function.

2. Add var before test.

For browsers that support placeholder, it simply falls back to that. It also handles new input elements (note the use of delegate) in existing forms. But does not handle dynamic new form elements. It could probably be modified to do so with jQuery.on.

If you don't like this one, you can use one of the ones here. However, some of them are overcomplicated, or have questionable design decisions like setTimeout for detecting new elements.

Note that it needs to use two pairs of parens, since you're calling an anonymous function, then calling the returned function (this could be factored out differently):

(function () {
  // ...
})()();

Answer 2

I wrote a jquery plugin a while back that adds the placeholder support to any browser that does not support it and does nothing in those that do.

Placeholder Plugin

Answer 3

Here's a jQuery plugin that works with password fields as well. It's not as tiny as the code suggested by Matthew but it has a few more fixes in it. I've used this successfully together with H5Validate as well.

http://webcloud.se/code/jQuery-Placeholder/