Different behaviors of placeholder attr

Question

I'm experimenting with placeholder attribute, but I have noticed that if I focus the field on Chrome the placeholder disappears, in Firefox it disappears only after the first keydown.

I like Firefox behaviour: how can I force Chrome to act the same way?

Thanks a lot

Answer 1

The specification states (emphasis mine)-

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

This means that browsers may implement either approach you described above. To deviate from the browser default behaviour you would probably have to write a custom JavaScript solution which would have an on keyup event handler and compare the input value with an empty string.

I would personally implement this using a data-placeholder attribute on the input to hold the value.

As it happens though, it would appear that Chrome has changed its default behaviour as with Chrome Canary and Chrome 31 (which is current), the placeholder value remained visible until the user started typing in the JS Fiddle I linked.

This behaviour was only tested on the "desktop" version of the browser, and only on the Windows operating system. It is possible there may be some variation on other platforms, even with the same browser.

Chrome auto-updates, it is in fact relatively hard to prevent this from happening, so it is highly unlikely that many of your users will be using a version as old as Chrome 14 (released September 2011). Generally it is my experience that statistics will show Chrome versions in use being divided between the last three versions, usually mostly the current and previous version (with ratio dependent on the time since the last release).

As a result, it would appear your issue is unlikely to affect many (if any) users.

Please note the following from the specification though-

Note: Use of the placeholder attribute as a replacement for a label can reduce the accessibility and usability of the control for a range of users including older users and users with cognitive, mobility, fine motor skill or vision impairments. While the hint given by the control's label is shown at all times, the short hint given in the placeholder attribute is only shown before the user enters a value. Furthermore, placeholder text may be mistaken for a pre-filled value, and as commonly implemented the default color of the placeholder text provides insufficient contrast and the lack of a separate visible label reduces the size of the hit region available for setting focus on the control.

Please don't use the placeholder as a replacement for labels, or at the very least have a hidden label for accessibility purposes (as in the Google example you cited).