One of the interesting 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 placeholder attribute we just need to include this attribute in our input fields and lo we are ready to go. Its 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.

Lets take a look at few of the Placeholder Polyfills available.

Make Placeholder Work for IE using jQuery

If you are already using jQuery in your page then I would suggest that you use the jQuery based polyfill for Placeholder. This is really easy to use and works really good.

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

 

Step 2.

Now add the attribute placeholder and its value within your input fields.

E.g

 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

You may feel free to use and 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

 Step 2.

Now add the placeholder attribute and its value.

E.g

 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 advance 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 and Google+. 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.