Hang On Placeholders

Avatar of Chris Coyier
Chris Coyier on

I remember when the behavior for placeholder="" text on inputs and textareas made that subtle functionality change in WebKit where the text would remain in place until you started typing rather than disappear on focus of the empty input. I think it may have been first on iOS actually, but now both stable Chrome and Safari do this.

I also remember thinking it was a smart change. Of course the placeholder is no substitute for a real

However, Jeremy Keith points out some research by Markus Earnst that suggests leaving the placeholder in place breaks some expectations and causes problems:

It seems that a relevant number of users do not even try to start typing as long as the placeholder text remains visible.

Granted, the research was a bit limited in scope, but it makes sense.

Jeremey provides this CSS solution if you want the old behavior back in WebKit based browsers:

[placeholder]:focus::-webkit-input-placeholder {
  color: transparent;
}

This is me chiming in with a possible best-of-both worlds middle ground:

[placeholder]:focus::-webkit-input-placeholder {
  transition: opacity 0.5s 0.5s ease; 
  opacity: 0;
}

The second time value in that transition means “wait half a second before firing off this transition.” I suspect that some people click or tab to inputs to get ready to enter information before they are cognitively ready to pay attention to that input yet. But once the focus takes place, then they start paying attention. If we give them a half a second where the placeholder is still visible and another half a second to fade it away, that is likely enough for them to understand the hint that the placeholder was giving them.

The event timeline being:

  1. User clicks (or taps, or tabs to, or whatever) the input
  2. Their eyes move to the input and their mind starts paying attention to it
  3. They comprehend the placeholder hint
  4. Placeholder goes away

A demo of that and another variation where the placeholder slides away toward the label:

Check out this Pen!

For the record, I’m not saying this is absolutely better. There is no hard science here. I’m just proposing an alternate UI experience that seems to make sense to me.

Are there any other solutions we could explore?