form input placeholder jQuery modernizer..

[maya90]

hi,

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..)

http://mayacove.com/dev/jq/test_placeholder.html

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..)

at any rate the code they have here,
http://webdesignerwall.com/tutorials...aceholder-text

also doesn't work in Chrome...

oh brother, so much time spent for a simple text input...

AND HOW ABOUT TEXTAREA???

thank you...

[maya90]

a simple detect-test here,
http://mayacove.com/dev/jq/placeholder_detect.html

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...)

at least in my Chrome it's not working.... :-(

WTF????

thank you..

[kohoutek]

Works just fine for me in Chrome 21.0.1180.89 on OS X Lion.

[paul_wilkins]

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..)

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.

[maya90]

thank you for your response....

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) )

//	if (!placeholder_support) {
		$('input[type=text],textarea').focus(function() {
			$(this).attr('placeholder','');
		});
//	}

omitting conditional then, because for Chrome the conditional returns that it does support it, but in my Chrome at least, it doesn't work at all....

make sense??

thank you...

[paul_wilkins]

make sense??

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.

[maya90]

so then what should I do?

why does the test in my Chrome say it works when in fact it doesn't??? :-(

thank you...

[paul_wilkins]

why does the test in my Chrome say it works when in fact it doesn't??? :-(

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.

[maya90]

What are you expecting from the test, that seems to be different from what it should do?

again, pls seee
http://mayacove.com/dev/jq/placeholder_detect.html

on Chrome:
alert comes up saying Chrome does support placeholder.. but when I click on the text box the text does not go away!!!!!!!!!!

THAT is the problem..... :-(

(again, my Chrome is Version 21.0.1180.89, running on mac 10.6.8..)

thank you...

[maya90]

my code to detect:

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');
	}
	

});

[maya90]

just realized something... the placeholder thingie (that text disappears on focus) does not work for "number" type input....

oh brother..... not sure if they want that also for the numbers... (this is actually for a test, not sure if I should ask them..)

so I guess for the "number" types I should do the regular JS thingie...?

but this also doesn't work..

$('input[type=number]').focus(function() {
		$(this).attr('placeholder','');
	});

oh brother... I can' believe how much time I've spent on this placeholder thing.... :-(

this is the only pending thing I still have on this project...

thank you...



EDIT: PS: so should I make them all type="text", then?

(used "number" type for following values those fields will have: things like length, weight, cost, etc..)

[paul_wilkins]

on Chrome:
alert comes up saying Chrome does support placeholder.. but when I click on the text box the text does not go away!!!!!!!!!!

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.

[maya90]

oooohhh... man, you're right, I didn't know... oh brother.....

[paul_wilkins]

oooohhh... man, you're right, I didn't know... oh brother.....

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.