Problem with Firefox and multiple placeholder attributed inputs

[ruckus-matte]

It appears this is only a Firefox issue but in my form only the last input is being cleared if the placeholder text equals the value of the field. I'm not entering anything in any of the fields and only the last one is cleared. removing the call to focus() on line 25 fixes the problem for me. Not sure if I need the field to be focused to on submit.

[mathiasbynens]

The idea is that submitting the form shouldn't work as long as one of the inputs is showing the placeholder text. In that case, the first empty input of the form should get focus.

There was indeed a bug which caused the last input to be focused instead. I fixed it, thanks!

[fjarrett]

First, thank you for this nifty little plugin. It rocks.

This particular issue is frustrating to me as well. My objective is to use a placeholder to suggest what kind of value could be submitted. So, when a user enters the same value as the placeholder example it's cleared away, just as you described.

This isn't an issue in an HTML5 browser, because placeholders and values are totally separate.

The idea is that submitting the form shouldn't work as long as one of the inputs is showing the placeholder text.

Shouldn't the main idea be to make non-HTML5 browsers handle the placeholder attribute just as an HTML5 browser would?

Not downplaying this script at all. Just frustrated that I can't find the perfect solution yet and that my JavaScript skills aren't good enough to make one. Thanks.

//Frankie

[mathiasbynens]

Frankie,

You just replied to a very old bug ticket. I’m glad to tell you that one of the problems you illustrated have since been fixed, i.e. the plugin doesn’t prevent form submission anymore.

It still messes up values and placeholder values. I never considered this to be much of a problem, since placeholder is meant to aid the user input, and proper placeholders usually make it clear that they’re not actual input. For example, if “blue” is a valid input value, you probably wouldn’t use placeholder="blue" — you would use something like placeholder="e.g. blue".

I’ll look into it though and fix this asap so you can stop looking for the perfect solution ;)

[fjarrett]

You are the man!

//Frankie

[mathiasbynens]

Fixed in ce625cd.