One of the exciting features of HTML5 is the “placeholder” attribute. This new attribute has helped web developers save a lot of time as without it we would have had to write JavaScript code to simulate the same. But now with the arrival of the placeholder attribute, we just need to include this attribute in our input fields and lo we are ready to go. It’s as simple as that! If placeholder not showing in IE9 or any other browser is an issue that you are facing, then please continue reading.
But hey wait! Does web developers’ nightmare, the IE browser, support it? Well, you must have guessed it right, the answer is NO. Actually, only the latest versions of IE support this feature and not the older ones; which means we will have to write JavaScript code to get it working on IE. Interestingly already a lot of developers have gone ahead and written the JavaScript code to fill that gap. There are many Polyfills available to make the Placeholder attribute work on older browsers.
Let us take a look at a few of the Placeholder Polyfills available.
Make Placeholder Work for IE using jQuery
If you are already using jQuery on your page, then I would suggest that you use the jQuery-based polyfill for Placeholder. This is really easy to use and works really well.
Just follow the below-mentioned steps to include the jQuery-based placeholder polyfill.
Step 1.
Firstly, download the jquery.placeholder.js from https://github.com/serby/jquery.placeholder.js and include the jquery.placeholder.js file within your page after jQuery.js (please note that you need to download the js file into your folder and not link to it directly from GitHub) .
E.g
<!-- Include the jQuery file -->
<script src="jquery.min.js" type="text/javascript"></script>
<!-- Include the jquery.placeholder.js file -->
<script src="jquery.placeholder.js" type="text/javascript"></script>Step 2.
Now add the attribute placeholder and its value within your input fields.
E.g
<input type="text" name="emailAddress" placeholder="Enter your email address" />
<textarea name="about" placeholder="Tell us about yourself" />Step 3.
Now you need to initialize the plugin and attach it to every input field of type text and every textarea element on your page.
E.g
<!-- Apply the placeholder functionality to elements
using appropriate jquery selectors -->
<script type="text/javascript">
$('input[type=text], textarea').placeholder();
</script>You may feel free to use any jQuery-supported selectors that you like, to target the field you want to.
Ta-da.. ! You have now successfully included the Placeholder polyfill in IE and now your placeholder attributes will work on IE too.
Make placeholder work for IE using JavaScript
In case you are not using jQuery then you may want to use a Placeholder polyfill that does not depend on jQuery. And yes, there are many such polyfill versions available.
Placeholder.js by James Allardice is one such placeholder polyfill that does not depend on any other JavaScript libraries like jQuery. Let’s take a look at how to use it.
Step 1.
Download the placeholder.js from http://jamesallardice.github.io/Placeholders.js/ and include it at the bottom of your page.
E.g
<!-- include the Placeholders.js file at the bottom of your page -->
<script type="text/javascript" src="Placeholders.js"></script>Step 2.
Now add the placeholder attribute and its value.
E.g
<input type="text" name="emailAddress" placeholder="Enter your email address" />
<textarea name="about" placeholder="Tell us about yourself" />Step 3.
Well, you are done with the basic setup of the Placeholders.js and now placeholder attributes will be supported on IE too.
But in case you want to use some advanced features then you can use the data-placeholder-focus or the data-placeholder-live attributes on the root <html> element. You can read more about these options and other APIs related to Placeholders.js at http://jamesallardice.github.io/Placeholders.js/
There are a lot of other placeholder Polyfills that can be equally useful to you. I would encourage you to try out a few of them and use the ones that you are comfortable with. Let us know your experience with placeholder polyfills. Do let us know your thoughts. Also please do like us on Facebook. You may also follow us on Twitter for interesting Tips and Tricks. Also please do share the post with your friends if you like it.