Make WordPress Core

Opened 8 years ago

Closed 8 years ago

#23938 closed defect (bug) (fixed)

Placeholder attributes for input elements don't show in IE

Reported by: Ipstenu Owned by:
Milestone: 3.6 Priority: normal
Severity: major Version: 3.6
Component: Post Formats Keywords:
Focuses: Cc:


Of note: They DO work on IE 10, but not on 7, 8 or 9.

Normal Browser sees this: http://cl.ly/image/1Q3t0Y0K1y14

IE sees this: http://test.rvoodoo.com/wp-content/uploads/2013/04/3point6fields.png

We either need to unhide the labels or apply some JS like https://gist.github.com/hagenburger/379601 to make the text visible for IE, otherwise we've crippled Post Formats.

If we do it the same way we do post titles, then we have to drop using placeholder. If we keep using placeholder, then I think this may work, but someone will want to test on IE 10 to make sure it's not goobering up the layout.

Two options patched.

Attachments (5)

23938-withplaceholder.diff (4.3 KB) - added by Ipstenu 8 years ago.
Using Placeholder, CSS jiggering for IE and non-IE
23938-withoutplaceholder.diff (4.8 KB) - added by Ipstenu 8 years ago.
Removing Placeholder (needs JS to hide on click/active)
23938-withlabel.diff (3.1 KB) - added by Ipstenu 8 years ago.
Round three, making labels visible
23938-4.patch (4.7 KB) - added by azaozz 8 years ago.
23938.diff (4.3 KB) - added by helen 8 years ago.

Download all attachments as: .zip

Change History (21)

8 years ago

Using Placeholder, CSS jiggering for IE and non-IE

8 years ago

Removing Placeholder (needs JS to hide on click/active)

#1 @SergeyBiryukov
8 years ago

  • Milestone changed from Awaiting Review to 3.6

#2 @helen
8 years ago

Would rather the labels just show. Also thought about icons inside the inputs. Placeholder only isn't great, as once something is entered in the field there are no indications what it was for.

As for 23938-withplaceholder.diff, let's not add or use IDs - the wrapper div + label element should be specific enough for CSS.

#3 @Ipstenu
8 years ago

I was adding IDs to match what we had already for the post title. If we do the showing, then we just have to remove class="screen-reader-text" from it all, or is that not what you were seeing?


Then just leave placeholder alone for a brilliant future where we can use it?

8 years ago

Round three, making labels visible

#4 @azaozz
8 years ago

It is possible to use the ie7/ie8 css classes to show the labels only in these browsers (will need to add an ie9 class too).

Showing both labels and placeholders seems like too much repetition? Imho either one or the other :)

#5 @Ipstenu
8 years ago

The IE9 class shows for IE10 too, in my quick tests on VirtualBox.

But yeah, the labels and placeholders are a bit much. Also the labels would need some CSS styling (float:left maybe) to keep them out of the way of being silly. I thought about hiding some of them, but while this works great for the ones that don't need labels (the inline text of 'Paste a URL below...' is good enough IMO), if I add in one for wp-format-image, it breaks quotes. Probably due to my CSS sucktastic skill level.

div.field.wp-format-audio label,
div.field.wp-format-video label {

#6 @azaozz
8 years ago

Yeah, currently the .ie8 class is added on the <html> tag with conditional comments. For IE7 we load ie.css.

We probably should switch to using the same code as the toolbar for that. Even if we drop IE7 support soon, IE8 and 9 will be around for quite some time and it's nice to be able to tweak the admin css for them.

We can't hide the labels with display: none;, need to do it with the screen-reader-text class. Looking at all formats, only the Quote format fields seem to need visible labels. All the rest get a nice "helper text" above the fields and work well with or without the placeholders. Of course we will keep the screen-reader-text labels on all other fields, only make them "normal" labels for the three Quote fields.

Last edited 8 years ago by azaozz (previous) (diff)

#7 follow-up: @toscho
8 years ago

  • Cc info@… added

label and placeholder do different things. They cannot have the same text, especially because it is forbidden to use placeholder as a replacement for label. So the text should be changed too.

Last edited 8 years ago by toscho (previous) (diff)

8 years ago

#8 in reply to: ↑ 7 ; follow-up: @azaozz
8 years ago

In 23938-4.patch:

  • Always show the label for Quote and Image post format fields.
  • Hide the placeholder in _wp_format_url when the label is shown (needs separate selectors in CSS to work properly).

Replying to toscho:
We are not replacing labels with placeholders. There are labels on all fields.

Is there any special (weird?) way screen readers use placeholders we should be aware of?

#9 in reply to: ↑ 8 @toscho
8 years ago

Replying to azaozz:

Is there any special (weird?) way screen readers use placeholders we should be aware of?

Screen readers read both elements in supporting browsers, for example: Link URL Link URL.

Use the label text to explain what the field is for and the placeholder for an usage example: Link URL http://example.com.

Link URL would not be valid content for that field, so it should not be presented as if it were.

8 years ago

#10 @helen
8 years ago

In 23918:

Show labels and remove improperly-used placeholders for post format fields. props Ipstenu, azaozz. see #23938.

#11 @helen
8 years ago

  • Keywords has-patch removed

Leaving open in case somebody thinks more can/should be done, e.g. adding exemplars for placeholder text or styling for labels.

#12 @azaozz
8 years ago

In 23926:

Post formats: connect labels with fields, move the two css blocks dealing with formats next to each other, see #23938

#13 follow-up: @azaozz
8 years ago

In post-formats.php we have a "strange" label.screen-reader-text on an <input type="hidden"> field that even has a placeholder: http://core.trac.wordpress.org/browser/trunk/wp-admin/includes/post-formats.php#L41

Is this perhaps needed for accessibility or is it something left over and not cleaned up?

Last edited 8 years ago by azaozz (previous) (diff)

#14 in reply to: ↑ 13 @helen
8 years ago

Replying to azaozz:

In post-formats.php we have a "strange" label.screen-reader-text

Probably my fault, leftover and/or bad copy-pasta.

#15 @helen
8 years ago

In 23931:

Remove unnecessary label, placeholder, and class for a hidden input. see #23938.

#16 @helen
8 years ago

  • Resolution set to fixed
  • Status changed from new to closed

Closing as fixed. If somebody wants to discuss adding exemplars for placeholders, feel free to open a new ticket.

Note: See TracTickets for help on using tickets.