keep placeholder on focus in IE10

Question

Under WebKit and Firefox, the text in a input's placeholder sticks around on focus—it doesn't disappear until input.val actually has something in it.

Is there a good way to force IE10 to do the same thing?

Answer 1

The :-ms-input-placeholder pseudo-class documentation from the Internet Explorer Developer Center seems to imply this is working as designed.

The placeholder text is displayed with the specified style until the field has focus, meaning that the field can be typed into. When the field has focus, it returns to the normal style of the input field and the placeholder text disappears.

Edit: If I had to mimic this behavior, I would look at placeholder polyfill libraries (that set the default value, float grey text over the input box, etc) which work with older versions of IE. They would have to be modified, because they probably feature detect the placeholder capability and defer to the browser. Also, this would have a "browser detect" code smell.

Update: An "IE placeholder text disappears" question was asked during a Twitter #AskIE question session on June 19, 2014 and @IEDevChat responded "We have an active bug for this behavior. Next version will provide a fix"

Answer 2

IE developers responded during the AskIE session on twitter IEDevChat that this is a known bug in IE BugList that they will fix in a future version.

Update:- Unfortunately the placeholder behaviour is still the same in IE11, but seems to work in Edge/Spartan versions.

Answer 3

There is no good way to make placeholder stay on field focus in IE 10+ but if you are trying to replace labels with placeholders then you should take a look at this.

http://mozmonkey.com/2014/02/css-only-placeholders-field-labels-i-e-float-labels/

It is way to combine placeholders and label to improve user experience.