Sunday, September 1, 2019

forms - 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



Answer




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?


No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...