placeMe.js – A Placeholder Polyfill
One of my favorite new attributes in the HTML5 Spec is the placeholder attribute. This new attribute allows us to easily add placeholder text to our input fields. When the input field is focused upon, the placeholder text is removed.
<input type="text" placeholder="Please enter your name">
This has been a standard feature on the web for quite sometime, usually being accomplished with JavaScript. With the introduction of the placeholder attribute, the browser takes care of the job for us.
Of course not every browser supports the placeholder attribute. While most modern browsers do (Firefox 4+, Chrome 4+, Safari 4+, Opera 11.6+), Internet Explorer does not.
I wanted to use the placeholder attribute without fear so I wrote a little polyfill using jQuery. I’ve decided to call it placeMe.js and give it away to anyone who would like to use it and/or improve upon it.
How to Use
First include jQuery
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
Next include placeMe.js
<script type="text/javascript" src="/path/to/placeMe-0.1.js"></script>
Now use the placeholder attribute to your heart’s content
<input type="text" placeholder="This is my awesome placeholder">
Download
This is my first attempt at writing a polyfill, so be sure to let me know what you think in the comments.
