Blog

jQuery Plugin for Browsers That Don’t Support Placeholder Attribute

The need for this type of plugin grows smaller every day, but not nearly fast enough. You Chrome/Safari/FF4/Opera 11 users don't need to worry about this one so much, but as developers, think of the users!

Calling the plugin:

The text field must also have an attribute placeholder which contains the text you want 'placeheld'.

You'll want to style the span class 'pass-span' with padding or position: relative, top: #px if you want to move down the spans a bit. The same goes for left alignment. I apologize, but I can't predict how you'll style your inputs and their respective text without making the plugin heaver than 3 lines of CSS.

Please feel free to add comments or suggestions. I'm always up for constructive criticisms and learning opportunities.

Tested and working in: FF 3.6.16, IE7, IE8. The type selectors might not work in IE6, which is dead to me.

Check out the placeholder plugin fiddle to play around with the functionality/look/feel. Look at it in Chrome to see what happens if you don't check for placeholder support.

We Placeholdin Github repo

P.S. Don't forget to style your placeholder text for those blessed browsers which support it. As of this writing only FF4, Safari 4+, Chrome 4+, Opera 11, iPhone 4.0+ (Respect to Dive into HTML5's forms page).