Form input placeholder shiv

As part of the HTML 5 form features, the attribute "placeholder" was introduced for input elements supporting text input (including password). This is awesome and does indeed make form input elements not only more accessible, but it also paves the way for "label less" UI on devices with no so much screen real-estate. However, as with all new things HTML 5 this too is not fully supported on every major browser. Enter the not so elegantly named "placeholderShiv".

I wrote this library to enable the "placeholder" feature in every browser. It will basically grab all the valid input elements and append to them functionality which will mimic the native placeholder feature. All you need to do is to assign values to the input elements and add the library of your choice. This value will be turned into a placeholder text. Try the demo to see it in action.

«PlaceholderShiv» comes in three versions, a Coffeescript version, a JavaScript version and a jQuery plugin. The Coffeescript and the JavaScript ones does not have any dependencies on any other libraries and they are somewhat faster than the jQuery plugin. However, the jQuery version will support browsers which does not implement "addEventListener" and it is somewhat easier to use if you're already using jQuery.


No comments: