input and textarea html5 ‘placeholder’ attribute support in IE (or other non compliant browsers)–jQuery plugin

Which results in

clip_image002

Where the text ‘Search Products’ disappears on focus and reappears on blur if the field is still empty. This text is not the ‘value’ of the field.

In addition:

  • If the value of the field is set to empty programmatically (using JS) the placeholder will appear (and vice versa when text is programmatically applied).
  • When the form is submitted with a placeholder visible, the value of the placeholder is not submitted.

Wonderful.. right?

Yep, it is and furthermore, it was very difficult to find such a thing. So, when I did, I figured it was well worth sharing. There are many such plugins but this is the only one I found which actually supported the highlighted points above. I.e. :

  • Programmatically clearing the field causes the placeholder to reappear.
  • There are no tricks using the value attribute. i.e. if you submit this form with the placeholder present, the value of the placeholder is not submitted as the value (which is the case with many such alternative solutions)

I take 0 credit for this, I’m simply sharing:

jquery-placeholder : https://github.com/mathiasbynens/jquery-placeholder

jquery-placeholder demo : http://mathiasbynens.be/demo/placeholder

All credit to the authors.

Huge Thanks.