Idea for placeholder text

[markjaquith]

Placeholder text has a fatal flaw, in my mind: once the field is focused, that placeholder text is gone. This can be confusing, especially if you tabbed into that field or it was selected by default. You can actually use placeholder text instead of labels, for a minimalistic form layout, but only if you correct this flaw.

So here's a potential solution:

​http://txfx.net/files/wordpress/labels/

It uses HTML 5's placeholder attribute (newest Safari and Chrome support it), with a jQuery plugin to handle that support for other browsers.

Thoughts?

[nacin]

Looks cool. Didn't realize the placeholder attribute was already being supported.

[scribu]

I don't see the advantage of using the placeholder attribute if, in the end, it's going to take up as much space as a regular label would.

[filosofo]

I second what scribu says: if there's enough room for a label below the input, just put it there with CSS consistently. Then those with JS disabled and screen-readers don't miss out on labels.

Also note that the W3C HTML 5 working draft ​explicitly says

The placeholder attribute should not be used as an alternative to a label.

[jane]

When Mark and I first talked about this, it was re the Title field on the post editor, which uses placeholder text instead of a visual label for visual design reasons, though it has a "label" for screen readers. I need to read up on the accessibility issues, but if accessibility can be worked out, I think this approach has a lot of potential and would be worth doing some prototype screens and testing with users. I'm thinking specifically of media uploader or the Settings section.

[shaunandrews]

I worked up a concept based on the idea of keeping the label in view. When you first click on the input, the label slides off to the right, becoming slightly opaque. When you focus out of the field - and you typed something - the label disappears. If the field is left blank, the label slides back to its original place. You can see a video, and download a plugin to see it in action at: ​http://www.shaunandrews.com/wordpress/title-prompt/

[alex-ye]

In FireFox 23.0 the placeholder text is gone when the user start type into the input, It's not a big proplem for me..

[helen]

Replying to alex-ye:

In FireFox 23.0 the placeholder text is gone when the user start type into the input

That's the problem, since we're using it in lieu of a label here, the user loses the cue as to what they're typing in that input.

Replying to shaunandrews:

That's pretty hot. I'm usually in the spec camp (don't use it as a substitute for a label), but this seems like a design decision that we'll just have to roll with. Code looks like it'll work out for screenreaders fine, although it'd be best to have somebody who really knows how to use one test it out.

[JustinSainton]

Yeah, @shaunandrews plugin is quite sexy. The only thing I'd change is to have it fade out once the text is overwriting (or about to overwrite) the placeholder.

[alex-ye]

Replying to helen:

That's the problem, since we're using it in lieu of a label here, the user loses the cue as to what they're typing in that input.

The placeholder attribute is not a replacement for a label,
Why not we simply show the Label in addition of the Placeboder ?!

[helen]

Replying to alex-ye:

The placeholder attribute is not a replacement for a label,
Why not we simply show the Label in addition of the Placeboder ?!

Feel free to mockup how that would look. I'm not seeing a place for it.

[helen]

#24042 was marked as a duplicate.

[helen]

lessbloat put a patch up on #24042, which I've now closed as a dupe.

[shaunandrews]

Replying to JustinSainton:

Yeah, @shaunandrews plugin is quite sexy. The only thing I'd change is to have it fade out once the text is overwriting (or about to overwrite) the placeholder.

Yup, fixed that. Working on a few more tweaks, and will submit a patch when done.

[nacin]

The plugin by shaunandrews looks cool, but I'd also venture to guess that all of that animation is likely going to be pretty distracting after the 10th time you see it.

[shaunandrews]

The patch above ports the code over from the plugin and into core. I also updated the full screen title field/placholder to react the same way.

Replying to nacin:

The plugin by shaunandrews looks cool, but I'd also venture to guess that all of that animation is likely going to be pretty distracting after the 10th time you see it.

The animation is very quick, any quicker and its actually more distracting (I tried a bunch of timings). I aimed to get it out of your way with little annoyance. After using it for a few days, I don't even notice the animation.

[desrosj]

It's been a considerable amount of time since this one received any attention. I did some testing and it seems like this is not widely implemented as the default behavior. In the latest Chrome, Firefox, Safari, and Opera, I found that the placeholder text now remains even after focusing the field, and reappears if the field is emptied.

Given these findings and the shift in preference to avoid using jQuery in Core as much as possible, I'm going to close this out.

Conversation can always continue on closed tickets, and this can be reopened if any of my findings are inaccurate or conditions change.