Input placeholders for Internet Explorer

Question

HTML5 introduced the placeholder attribute on input elements, which allows to display a greyed-out default text.

Sadly the Internet Explorer, including IE 9 does not support it.

There already are some placeholder simulator scripts out there. They typically work by putting the default-text into the input field, give it a grey color and remove it again as soon as you focus the input field.

The drawback of this approach is that the placeholder text is in the input field. Thus:

1. scripts can't easily check whether an input field is empty
2. server side processing must check against the default value, in order to not insert the placeholder into the database.

I would like to have a solution, where the placeholder text isn't in the input itself.

Answer 1

In looking at the "Web Forms : input placeholder" section of HTML5 Cross Browser Polyfills, one I saw was jQuery-html5-placeholder.

I tried the demo out with IE9, and it looks like it wraps your <input> with a span and overlays a label with the placeholder text.

<label>Text:
  <span style="position: relative;">
    <input id="placeholder1314588474481" name="text" maxLength="6" type="text" placeholder="Hi Mom">
    <label style="font: 0.75em/normal sans-serif; left: 5px; top: 3px; width: 147px; height: 15px; color: rgb(186, 186, 186); position: absolute; overflow-x: hidden; font-size-adjust: none; font-stretch: normal;" for="placeholder1314588474481">Hi Mom</label>
  </span>
</label>

There are also other shims there, but I didn't look at them all. One of them, Placeholders.js, advertises itself as "No dependencies (so no need to include jQuery, unlike most placeholder polyfill scripts)."

Edit: For those more interested in "how" that "what", How to create an advanced HTML5 placeholder polyfill which walks through the process of creating a jQuery plugin that does this.

Also, see keep placeholder on focus in IE10 for comments on how placeholder text disappears on focus with IE10, which differs from Firefox and Chrome. Not sure if there is a solution for this problem.

Answer 2

Best one in my experience is https://github.com/mathiasbynens/jquery-placeholder (recommended by html5please.com). http://afarkas.github.com/webshim/demos/index.html also has a good solution among its much more extensive library of polyfills.