Joey Nelson Blog Misunderstanding

If you’re trying to build a minimal UI, you’ll probably end up using form hints at some point. These hints are the example text that occupy a text input until the user types something:

This is a nice feature for users, but it’s always required some hacky javascript to pull it off. The simplest approach is to set your hint as the text input’s value, and style it with lighter gray text. There are a couple of annoying things here:

• If the user doesn’t type anything, the form will submit the hint as the input value (unless you code around this)
• Hints in a password field will show up as hidden passwords (•••••)

So that sucks.

Another option is to make a dummy input with the hint and display that above your real input. When the user clicks the dummy input to start typing, you hide the dummy input to reveal the real input beneath it. The EZPZ Hint jQuery plugin is a really nice example of this.

I’ve been happily using that until recently, when I was building an iPhone-optimized version of omgtru. EZPZ Hint looked great, but had an annoying issue in Mobile Safari: when you clicked the dummy hint input, the keyboard would pop up. The dummy input would immediately get hidden and the keyboard would slide down. Then, focus is set to the real input and the keyboard pops up again.

Of course, everything worked, but it really bugged me. So I started looking into some of the new HTML5 form features. Luckily, there is a new input attribute called placeholder that does exactly what we want. We just set up our input like this:

<input name="username" placeholder="Enter username">

No hacky js necessary. It doesn’t work in every browser, but it works in Webkit (including Mobile Safari). So we just have to check and see if our browser supports it. If not we can fall back to EZPZ Hint with an input set up like this:

<input class="hint" name="username" placeholder="Enter username" title="Enter username">

(You could get rid of the redundant placeholder/title by setting one of them dynamically based on the other.)

So let’s see if our browser supports the placeholder attribute. Of course we want to do this the right way. We don’t want to do browser sniffing. Really. We just want to check with the browser and see if an input element has the placeholder property:

if(!('placeholder' in document.createElement('input'))){
	$('input.hint').ezpz_hint();
}

Awesome, it works! Uh, except on my iPhone (iPhone 3GS, still running iOS 3). Why? I have no idea. Mobile Safari supports placeholders but fails that test. So we have to resort to some good-old fashioned browser sniffing. This makes us horrible people.

So figure out how you want to do that. I have to do it in PHP anyway so I’m just setting a javascript variable:

if(!is_iphone && !('placeholder' in document.createElement('input'))){
	$('input.hint').ezpz_hint();
}

So that’s it. Hopefully browsers will adopt placeholder text across the board and someday we won’t have to deal with any hacky workarounds. I can dream, right?