Opened 12 years ago
Closed 12 years ago
#23938 closed defect (bug) (fixed)
Placeholder attributes for input elements don't show in IE
Reported by: |
|
Owned by: | |
---|---|---|---|
Milestone: | 3.6 | Priority: | normal |
Severity: | major | Version: | 3.6 |
Component: | Post Formats | Keywords: | |
Focuses: | Cc: |
Description
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)
Change History (21)
#2
@
12 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
@
12 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?
http://cl.ly/image/1U160I204644
Then just leave placeholder alone for a brilliant future where we can use it?
#4
@
12 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
@
12 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 { display:none; }
#6
@
12 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.
#7
follow-up:
↓ 8
@
12 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.
#8
in reply to:
↑ 7
;
follow-up:
↓ 9
@
12 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
@
12 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.
#11
@
12 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.
#13
follow-up:
↓ 14
@
12 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?
Using Placeholder, CSS jiggering for IE and non-IE