One of the (arguably) best new features of HTML5 has to be the placeholder attribute for elements designed to accept input.

In the old days, people were using a variety of javascript and css to accomplish similar results, but none were quite as fluent as the native placeholder attribute HTML5 brings to the table.

Being a web design and development company and facing the same dilemna every day, our solutions was to write our own HTML5 placeholder fallback script, utilising jQuery.

Introducing placeholder.js

Our small jQuery library for dealing with placeholder fallback is available from Github: https://github.com/emarketeer/Placeholder.js

Using placeholder.js for HTML5 placeholder fallback support

Simply put,

  1. Include placeholder.min.js at the foot of your page.
  2. For all inputs where a placeholder is required, add data-rel=”placeholder” to the element.

That’s it.