Help text visibility in title input box is not intuitive

[aniketpant]

Currently, the input box for title which shows on a new post creation page uses a label to display the help text- "Enter title here". This text disappears on focus and an that point of time, there is no place which points out that this input box is for the title.

This problem has been pointed out by a lot of people and it surfaced after the new Gmail design came out. The problems it generated are very similar and as you may have used it, there are no labels for the email recipients field and the subject field.

The issue is not very big as such but it does generate ambiguity in some cases. The solution to this would be to have the label as an overlay on the input, which can slide/move to a new position on focus. And placeholder text can be used as help text. This way the help text will be visible at the start and the label will be visible throughout.

[SergeyBiryukov]

Duplicate of #23980.

[aniketpant]

Replying to SergeyBiryukov:

Duplicate of #23980.

The issue I am raising over here is different from #23980. That ticket is dealing with an issue specific to the placeholder text visibility when post format is changed, whereas I wish to pose a question on the general usability of the input field.

[SergeyBiryukov]

I see, thanks for the clarification.

[lessbloat]

Unfortunately the html5 input placeholder doesn't work in IE8 & IE9.

I refactored our custom placeholder code in 24042.diff​. A couple notes:

• This now keeps the placeholder text there until you start typing.
• Note sure if common.js is the right file for this. Seemed to be the best place. This can be reused anywhere in the admin now.
• I used _.throttle to prevent the keyup from firing so much (note, I tried _.debounce, but it delayed the hiding of the placeholder text a bit longer than _.throttle)

Tested in MAC Chrome & FF, and WIN Chrome, FF, IE8

[helen]

There's also an idea in the form of a plugin over on #14097 - closing this as a dupe.