Using placeholder text in HTML5 forms across all browsers

In the dark recesses of my mind lurk a couple of lines of JavaScript that exist purely to fudge placeholder text in older browsers.

Thanks to the placeholder attribute on input elements defined in HTML5, the days of having to cart this snippet of code around are numbered.

To see what it used to look like, cast your eyes upon this:

<input type="text" value="Type here..." style="color:#aaa" onfocus="this.value='';this.style.color='#000';this.onfocus='';"/>

For the sake of brevity, I condensed the styling and onfocus functions into single liners — but it is no less horrid when abstracted properly.

What happens is that we set the colour of the input’s “Type here…” text to a grey colour, then the element gains focus, the colour is switched to black, the text in the element is cleared and, finally, the event removes itself.

It’s a fair amount of effort for what should be a trivial operation.

Fortunately, in these enlightened times, to give an input element placeholder text, one only needs to use the following code:

<input type="text" placeholder="Type here..."/>

Which is wonderful, and does what the first piece of code did, but in a shorter and cleaner way — unless you are making use of non-Windows 8 versions of Internet Explorer, but you knew that was coming.

Rather than delve into the world of browser sniffing, ourselves, we can fix the Internet Explorer situation via the use of the Modernizr library. There are plethora of articles across this site that deal with Modernizr, so I will not go into the details of how it works or initiating the library, but suffice to say, the library loads polyfills on a needs-basis.

From Modernizr’s list of polyfills, I will use Placeholders.js, since it is one of the few that doesn’t require jQuery, and we don’t need the extra weight of jQuery for an example such as this.

We start with this code:

<p>New way:
<input type="text" placeholder="Type here..."/></p>

<p>Old way:
<input type="text" value="Type here..." style="color:#aaa" onfocus="this.value='';this.style.color='#000';this.onfocus='';"/></p>

In IE, it looks like:

Then add Placeholder.js for IE compatibility:

<script src="Placeholder.js"/>
<p>New way:
<input type="text" placeholder="Type here..."/></p>

<p>Old way:
<input type="text" value="Type here..." style="color:#aaa" onfocus="this.value='';this.style.color='#000';this.onfocus='';"/></p>
<script>Placeholders.init();</script>

If you open the above code in Internet Explorer, you can now see that the placeholders are behaving correctly.

Now we make the loading of Placeholder.js and its initialisation optional by adding in Modernizr:

<script src="modernizr.js"/>
<p>New way:
<input type="text" placeholder="Type here..."/></p>

<p>Old way:
<input type="text" value="Type here..." style="color:#aaa" onfocus="this.value='';this.style.color='#000';this.onfocus='';"/></p>
<script>Modernizr.load({
            test: Modernizr.input.placeholder,
            nope: ['Placeholder.js'],
            complete: function(){Placeholders.init();}
        });
</script>

And now we have native implementation working properly in Firefox, IE 10 and WebKit-based browsers, with the polyfill being loaded on demand for older browsers.