28 June 2011
Persistent Placeholders Tutorial: let’s focus
UPDATE: many browsers are now rendering the placeholder attribute in this way by default (newer versions of Firefox, Chrome, and Safari), but the technique still benefits older browsers.
I’ve noticed a UI feature on a few sites recently where placeholders still show up after you click into a form input. Normally, the text disappears once you trigger the focus on an input, but these ones persist—often going a shade lighter—and then they disappear completely once you start typing. It looks like this…
- No focus on form input
*scroll down for interactive demo
- Click into form input (now focused, but placeholder is still there)
- Add some text (placeholder disappears)
I don’t know who originated it—it is common with apple products, like on the iPhone—but the first few sites that I saw using this technique were Tumblr, Twitter, and Wordnik. I also couldn’t find anyone talking about it, so I put together a simple, little persistent placeholder jsfiddle to show a way that it can be done (with a little help from jQuery). Click on the result tab to see the final result.
Here are a few reasons why this technique is swell:
- the markup is simple and “accessible” (it’s the old fashioned label and input construct)
- the placeholder works on password fields (for old and new browsers)
- the placeholder can be used effectively on auto-focused fields
- the text keeps you on task by still being there while you’re inside in the input
- it’s new and fun
Let me know in the comments if someone has a better name for this. My brainstorm list was:
- persistent placeholders
- focusable placeholders
- labels as placeholders
- placeholders 2.0
- ZOMG teh placeholder is still there!?!1!
I’ll see you next time!