I can’t test on IE, but I just realized that even Chrome doesn’t support this HTML5 “placeholder” stuff…
even this one, http://www.cssnewbie.com/example/placeholder-support/
the box where it says it works in all modern browsers it doesn’t work in Chrome (Version 21.0.1180.89 on mac)
(I mean functionality that box gets emptied of text on focus…)
so how do I make this work in browsers that do not support this stuff? (& I can’t even test on IE)
all this slick HTML5 stuff in the end is more work than it’s worth…
because of the old browsers…
so how about just including a “value” attribute – in addition to placeholder attribute – and then doing the traditional JS stuff to empty the field on focus
instead of doing this whole modernizer thing?
(can you just detect whether the browser supports support placeholder attribute? I can take it from there…
not even sure what things I need to check here http://modernizr.com/download/
to make this placeholder functionality work with modernizer/older browsers…
(checked the two that mention “input” but might not do the trick…)
to detect if browser supports placeholder feature, on Chrome get alert that it’s supported, but it clearly is not working
(can test yourself in text input…)
There may be a misunderstanding going on here. The HTML5 placeholder specs don’t say that the placeholder text must be emptied on focus. Here’s what they do say (formatting added by me):
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 and/or the control is not focused (e.g. by displaying it inside a blank unfocused control and hiding it otherwise).
So due to the and/or situation, it’s up to the browser vendors to determine whether the placeholder text is to be cleared on focus or not.
well, it doesn’t work at all in my Chrome, so main issue is:
when I test for support in Chrome the test returns that it does support it… (???)
either it supports it or not, that’s fine… but if I test and it says it does support it when in fact it’s not working,
(as can see here, http://mayacove.com/dev/jq/placeholder_detect.html)
that throws a bit of a monkey-wrench into my situation…
so opted for this very simple solution, then, that am applying to all browsers (without conditional to test if it’s supported (and can’t even test in IE – yikes) )
Sorry no, it doesn’t make sense. Some browser vendors have decided that the placeholder should still remain when the field is focused, and should only be not shown once some content it placed there.
Secondly, with your solution, if someone moves on to another field leaving that previous one empty, you have now removed the placeholder that should normally reappear there.
And also, people using your page will experience a different user experience from what they are used to. If they have become used to placeholder fields remaining until they type something, it will come as a surprise to them when the placeholder disappears as soon as they touch it. Don’t surprise your users. Go with a policy of least surprise.
What are you expecting from the test, that seems to be different from what it should do?
What I am experiencing is that the placeholder text goes away as soon as I type something in the field, and it returns when I remove what I typed in the field. That is the normal experience for me on my chrome browser.
With Firefox, the placeholder goes away instead when the field is focused, and returns when the field has no content and is not focused.
It is unrealistic to expect different web browsers to behave exactly the same as each other. Instead, what should happen is for the experience on a web browser to be consistent across multiple web sites.
[FONT=Courier New]function supports_input_placeholder() {
var i = document.createElement('input');
return 'placeholder' in i;
}
$(function() {
if (supports_input_placeholder) {
alert('this browser supports placeholder');
} else {
alert('this browser does not support placeholder');
}
});[/FONT]
The placeholder text goes away when something is entered in to the text field. That is how it works on the Chrome web browser, is normal, to specifications, and is expected.
It helps to apply the same mind-set that is applied to other cross-web browser situations. Don’t expect them to be pixel perfect, or to behave exactly the same either
Instead, attempt to have the user experience be consistent between your pages and the thousands of other sites that the user views with their same web browser. Anything else tends to be a recipe for madness.
