Citymapper is what happens when you actually understand user experience.
Update 2/15/2012: previous version of this article was
s/WebKit/Safari/g, but Chrome also implemented this behavior in v17.
Placeholder is a cool feature for HTML5
textareas that let you specify a sample/advice text in the form field when the user has not typed anything in. Unlike a default value
- the actual value (sent on submit) is empty
- the text is rendered with a distinctive look, usually a faded gray for black-on-white inputs
- when the field is focused or not empty, it disappears
Indeed, the W3C specifications explicitly state:
User agents should present this hint to the user, after having stripped line breaks from it, when the element’s value is the empty string and the control is not focused
Firefox, Opera, and the polyfill for older browsers implement this to the letter:
WebKit thinks different. It waits for the user to actually type in something before removing the placeholder text:
This behavior can be useful, because the focused field doesn’t always means the user remembers the placeholder text. He may hit tab before reading the content of the next field. He may give focus to the field, switch to another tab or application (because of an unrelated event like IM as well as to copy/paste some information) and come back to the form. And if one would like to auto-focus the field in the first place, then the W3C-compliant implementation beacomes useless.
The only drawback I see to WebKit’s approach is that some user might be confused of some text being still present in the field while it’s focused, thinking it is content and unable to delete it. But the rendering is different and WebKit also uses this technique in its search bar, so I guess this confusion rarely occurs.
Also, placeholder is not to be confused with in-field labels, which is not the same purpose and shouldn’t use the same code, preferring
labels + styling. Yet it can (and should even more than for placeholder) make use of the same mechanism of waiting for user input before removing the label.
We can use the same polyfill to force this behavior, but we’re faced with a dilemma here: feature detection won’t work, since placeholder is supported by, say, Firefox. So we must either use the polyfill on all browsers (even those supporting placeholders) but waste CPU in WebKit, or do vendor detection which we don’t like to rely upon.