Removing placeholder text on focus

    • Chrome, Safari, and Firefox 15+ remove the placeholder text after the users first key press in the text input field.
    • Opera, IE, and Firefox 14 and below remove placeholder text immediately after focusing the text input.

    Which approach is better for users and why?

    Test placeholder in your browser on jsfiddle.

    Update: Placeholders in Form Fields Are Harmful

    Here is one of many workarounds to make all browsers behave like Chrome on this regard:

    Sure is a lot of speculation in this thread. Can someone post an answer with user research applied?

    Curious if there is an implication for screen readers.

    Good question, but +1 For the update too!

  • Ben Brocka

    Ben Brocka Correct answer

    9 years ago

    Interestingly the w3 Spec for placeholder allows for either behavior:

    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/or the control is not focused (e.g. by displaying it inside a blank unfocused control and hiding it otherwise).

    But, functionally speaking, there's little reason to clear it before the user starts typing. Users tabbing through your form might never see it because they'll tab into the field before seeing the placeholder text. Mouse users might not have finished reading the placeholder text before they click.

    If your field is complex enough to require a placeholder, it probably requires some thought; what better time to think "what should I input?" than when you're focused on the field? Why take away that hint from users focused in the field but confused as to what to type?

    +1 I would go so far as to say it IS better to remove the text after they start typing, for the reasons you stated.

    I updated the code, I think this would be more clear for user which input is focused - Now if user focus the input, the placeholder text become more lighter to indicate that it is only the hint and exactly this input is focused. This code works in chrome only, because other browsers remove placeholder on focus.

    @webvitaly interesting touch, though I'd want to make it apparent that the placeholder isn't a default/value, which is why I think they stray on the faded-out side instead of looking like normal text. I've also seen italics used to indicate *this text isn't real*

    @BenBrocka If we are duplicating label text in placeholder text (very often) and sometimes user could not understand that placeholder text is the hint text so there is no need to use the placeholder at all and it is more clear for user to leave blank input and simple label. Hm, funny, I returned to the point from where the web-forms were started many years ago :)

    showing the placeholder when the field is focused is also interesting for the case where the field is also autofocus. if the placeholder disappear on focus, the user wouldn't have a chance to see it

    My concern with placeholder text is that users may get confused that they cannot select and delete the text that is in the field. Are there any studies regarding placeholder text?

    firefox is moving toward keeping the placeholder while empty and focused :

    Maybe an experiment like this can help users tell that they're supposed to type over the placeholder text?

    @CodeJunkie I like the "Move over and fade" on focus; I've seen the "fade" before and find it useful, but I like the move over too, it sort of gets out of the cursor's way.

    +1 "what better time to think "what should I input?" than when you're focused on the field?"

    Firefox 15 now removes placeholder on typing. 14 and before used to remove on focus.

License under CC-BY-SA with attribution

Content dated before 7/24/2021 11:53 AM