• Basic Example
• Example using Modernizr
• Example that hides on type instead on focus
• Example that runs the polyfill in all Browsers

HTML5 Placeholder Polyfill Examples

The Placeholder Attribute has decent support across current Browsers. This Script adds support for the older generations including:

• Internet Explorer < 10
• Firefox < 4.0
• Safari < 4.0
• iOS Safari < 4.0
• Android Browser < 2.0

for more details on native support see the Browser suppport table at caniuse.com

Other than most other solutions this Polyfill will read the Placeholder Text to Screenreaders. It does this by adding the Text to the form fields asociated Label.

Update Placeholder Attribute

Form Elements with explicit labels (using id and for)

Form Element with visually hidden label (i.e. for search boxes)

Using the "visuallyhidden" class from i.e. HTML5 Boilerplate

HTML5 Boilerplate uses a way to visually hide elements that makes it impossible for containing elements (like the polyfilled Placeholder) to be visible. To make it work anyway the Polyfill changes said technique (only for labels) with a technique that is less obstrusive but still hides them.

Using the oldschool "offscreen" class (pushing the element to the far left using position:absolute)

Form Elements with implicit labels (wrapping the form element into the label)