Alternate title: Placeholding is Hard

Recently I implemented a user interface with a search field that used both autofocus and placeholder attributes. I learned that different browsers implement Placeholder attributes differently. The official spec says the placeholder text should disappear on focus, but most modern browsers (Firefox, Chrome, Safari) implement an “unofficial convention”, where the placeholder text remains on focus, until the user begins entering text.

Here’s the catch: IE 10 doesn’t follow that unofficial convention. This is one case where the IE team actually follows the specs better than the other browser vendors do, but the browser still looks like the odd one out since it is the only commonly used browser that implements the feature that way.

Not all developers can agree whether the official spec (clear-on-focus) or the unofficial convention (clear-on-entry) is better, and some people have pretty strong opinions either way. I can see merits to both behaviors, but I don’t take a side either way. The design I had to implement combined both autofocus and a placeholder, however, so I had to override IE 10’s native implementation and backport the behavior to earlier pre-HTML5 versions of IE as well.

It turns out that while there are about a dozen plugins which backport placeholder support to older browsers, none of them did everything I needed them to do:

• Support for unofficial clear-on-entry behavior
• Option to override native implementation
• Support for IE 9
• DOM compatible with HTML 5 implementation (text as input value, not as absolutely positioned elements)

After evaluating every one of the plugins in Modernizr’s list (linked above), I had to roll up my sleeves and write my own. Nah, that’s too hard, actually I forked Shane Carr’s excellent Placeholdr.js project and modified it just enough to support the unofficial clear-on-entry behavior (Placeholdr originally only supported the official behavior) and to optionally override native implementations.

My forked project is available at https://github.com/SamPlacette/placeholdr if anyone would like to use it. It does itch a unique scratch, so hopefully someone else out there will find it helpful. Eventually I would like to submit a pull request back to the Placeholdr master branch, but first I need to figure out a way to restore backward compatibility with the Placeholdr project.

Hope this helps you out. I’d be curious to hear if you have had to deal with any other unusual problems with cross-browser support or if you have some ideas on what I could do to improve my fork of the Placeholdr project.