Placeholder is problematic when page loads and input is focused straight away

[Jezternz]

I have a website that requires authentication, The first thing a user will ever type is the username. For this reason I automaticly focus the username field for a fast log-on. However no placeholder is displayed when focus is on the input (in IE), in Firefox and Chrome the behaviour is different (it shows the placeholder while the value is an empty "").

It is rather problematic in my scenario but could be problematic in any scenario where you may want to autofocus an input. Regardless it is inconsistent behavior. Was there a technical reason behind this choice? i noticed using inspector the value is set, nothing else. I guess this means the plugin would require a serious rewrite to add this feature request?

Cheers,
J

[ryansit]

I agree this is a problem

[msandi]

I'm having the same problem and have been searching for an answer all week!

[nspady]

I had the same problems with this plugin, so I wrote one that makes it so that all browsers keep the placeholder text until a value is entered. This overrides the default behavior for IE 10-11 to keep things consistent. Give it a try and see if it works for you https://github.com/nspady/jquery-placeholder-labels/blob/master/placeholder-labels.js

[joshribakoff]

There's a bit in the readme, explaining how its by design, and offering an official plugin/workaround to clear upon focus.

This also happens with jquery.validate, which focuses the field when its invalid. It has related issue #163 because when a field has automatic focus & not manually focused, the placeholder itself becomes editable. Also the placeholder isn't cleared when the user starts typing.

The stuff you guys mentioned above is by design apparently, but I noticed those additional symptoms like the placeholder text itself becomes editable & is not cleared.

Example I have a field

If focus is set to it with autofocus, the cursor is after the word "email" and if I begin typing "foo@bar.com" the end result is a field with a value of "emailfoo@bar.com" because the placeholder text was not cleared for me prior to typing, and after being autofocused.

[madodela]

@nspady thank you so much! your plugin works very good, I just had to fix some styles and some events, but great job man

[amerikan]

This is the expected behavior. Issue #92 would solve this problem, if it gets implemented, whenever that will happen, I don't know.