4

I catch myself clicking twice when I click into a text box here on Stack Overflow. Why? Because my brain thinks, “Oh look, grey prompt text is still there — you didn’t click right, Alan; try again.”

On an even closer inspection, I have noticed that my cursor actually appears in the grey text! It doesn’t go away until I start typing.

Now, two items.

  1. Native HTML5 <input placeholder /> support, in my browser (Chrome 8 on OS X) clears the placeholder on focus.
  2. iOS doesn’t clear placeholder text on focus (c.f. search fields in the iPod/Music app), but it DOES place a very visible cursor at the BEGINNING of the input field, not wherever I clicked.

As-is, SO’s placeholders feel very wrong. Please improve them!

Improve this question
6
  • 1
    Interestingly, the site search box does empty itself on focus, creating even more confused user expectations.
    – Alan H.
    Jan 12, 2011 at 4:07
  • @Alan - Does this question relate to the Edit Summary box when editing a question/answer?
    – codingbadger
    Jan 12, 2011 at 8:19
  • @Barry: Try the Ask Question page (title and tags fields).
    – Jon Seigel
    Jan 12, 2011 at 17:39
  • 1
    +1 because I think the behaviour should at least be consistent.
    – Jon Seigel
    Jan 12, 2011 at 17:42
  • We have recently changed the placeholder functionality (I assume it works similar to the site you linked to). So you can choose if you want [status-bydesign] for "Input prompts don’t clear on focus" or [status-completed] for "cursor appears in prompt text" :)
    – balpha StaffMod
    Feb 4, 2011 at 6:33
  • I just noticed this has been implemented. Awesome! One little thing, and slight difference from the Square site: I notice that before I start typing, the cursor is very light grey. Is the input box semitransparent? If so, is that necessary anymore? It doesn’t seem to be the case over at Square.
    – Alan H.
    Feb 5, 2011 at 2:41

2 Answers 2

Reset to default
1

I just saw a similar-in-spirit custom placeholder implementation in effect on https://squareup.com/ — check it out and come back here.

Notice any differences?

  1. On focus, the placeholder text fades to an even less contrasting color, providing concrete feedback that you did focus successfully.

  2. No matter where you click, your cursor does not show up within the placeholder text, but rather at the very left of the input box. This is much more confidence-inspiring (and is what iOS does)

Note that their implementation clears up my criticism with the placeholder text here on SO entirely (as surely the cursor appearing in middle of placeholder isn’t “by design”).

Improve this answer
3
  • interesting we will definitely take a look at that.. thank you!
    – Jeff Atwood
    Feb 1, 2011 at 18:51
  • Yep, their implementation looks very much like the way we're trying to solve it as well. I guess that's a good sign :)
    – balpha StaffMod
    Feb 1, 2011 at 18:54
  • You’re quite welcome. Hope it helps!
    – Alan H.
    Feb 1, 2011 at 19:59
0

This is by design, as we want the help text to be visible until you start typing.

Improve this answer
5
  • IMO, this is a bit unexpected, but okay. Can we at least make the behaviour consistent across all fields where this happens? (See the 1st comment on this question.) I was a rebel on SEDE and even made the "search" prompt reappear OnBlur, but that can be changed easily enough to match.
    – Jon Seigel
    Jan 12, 2011 at 17:41
  • I can see keeping the text there as by design, though I do find it inconsistent — but don’t you think that the cursor appears in the midst of placeholder text a bit disconcerting? Surely that isn’t by design.
    – Alan H.
    Jan 13, 2011 at 6:54
  • @Jon, Jeff — Have you considered only providing this functionality after detecting whether or not the browser supports native placeholder functionality? Native placeholders are bulletproof (e.g. re-apply themselves on blur) and guarantee as broad a consistency as possible on the user’s platform
    – Alan H.
    Jan 13, 2011 at 6:57
  • @Alan H.: Jeff's answer says "we want the help text to be visible until you start typing" -- the native placeholder (at least in Chrome) disappears as soon as you focus the field
    – balpha StaffMod
    Jan 13, 2011 at 9:31
  • Well it’s your guys’ call, but I wouldn’t expect myself to be the only one who is thrown off by the nonstandard behaviors. There are other ways to solve the problem you’re trying to solve here: Use an actual label, or let the user decide to blur if they forgot what it said, etc. I would definitely change how these controls work, myself, because consistency with other sites matters more than what you conceive as ideal. But I’ll leave now, having shared my piece.
    – Alan H.
    Jan 14, 2011 at 21:21

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .