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.

Answer 4

I thought I'd share the workaround I used to sort this issue as it seems IE11 still doesn't have a fix.

In my example - IE11 had added my placeholder value as an actual value within the textarea.

Here's what I had in my template view:

<textarea placeholder="Type your message">
</textarea>

Here's what rendered on the front-end in IE11:

<textarea placeholder="Type your message">
    Type your message
</textarea>

So as the user focused on the field - their cursor was at the end of the '..message here' string - odd!

The workaround for me was to add an initial class to the element on load. Then a basic on 'focus' bind event to check if the class was present - if present, it removes val and then also removes the class. So as soon as the user focuses on the field - the value is reset to an empty string.

Here's the bind event (this particular example was on a dynamically loaded modal - you could simplify this):

$(document).on( "focus", '.textarea', function () {
    if ($(this).hasClass('placeholder-val-present')) {
        $(this).val("").removeClass('placeholder-val-present');
    }
});

This works nicely because when the user tabs out of the field - the placeholder is re-added and it works normally as you'd expect in IE11 and all other browsers.

I'm sure this is quite a niche example - but it may come in handy for others!

Answer 5

The trick is to call focus() and select() both on the input element.

$("#elementId" ).focus();
$("#elementId" ).select();

Answer 6

best solution! work in all browsers

http://jsfiddle.net/q05ngura/3/

document.onkeydown =  function(e) {
 if(!e)e=event;
 var checkVal = Number(this.value.length);
 if((e.keyCode < 112 || e.keyCode > 123) &&  // F1 - F12
    e.keyCode != 9 &&  // Tab
    e.keyCode != 20 && // Caps lock
    e.keyCode != 16 && // Shift
    e.keyCode != 17 && // Ctrl
    e.keyCode != 18 && // alt
    e.keyCode != 91 && // Left window key
    e.keyCode != 92 && // Right window key
    e.keyCode != 27 && // Esc
    e.keyCode != 37 && // Left arrow
    e.keyCode != 38 && // Up arrow
    e.keyCode != 39 && // Right arrow
    e.keyCode != 40 && // Down arrow
    e.keyCode != 13 && // Enter
    e.keyCode != 45){ // Insert
    
    checkVal = Number(this.value.length) + 1;
    }
    
 
 if(e.keyCode == '8'||e.keyCode == '46'){// backspace || delete
 checkVal = Number(this.value.length) - 1;
 }
 if(checkVal > 0){
  this.parentNode.getElementsByTagName('label')[0].style.zIndex = '-1';
 }else{
  this.parentNode.getElementsByTagName('label')[0].style.zIndex = '0';
 }
});

body{
    padding:0;
 margin:0;
    background-color:#ccc;
}
}
::-ms-reveal {
    display: none;
}
input::-ms-clear {
    display: none;
}
label{
 position: absolute;
    right: 60px;
 margin-top: 10px;
    font-size: 13px;
    font-family: sans-serif;
    color: #A9A9A9;
    z-index:0;
 pointer-events: none;
}
@media screen and (-webkit-min-device-pixel-ratio:0) { 
label{
 margin-top: -25px;
 right: 57px;
}
}
@-moz-document url-prefix() {
    label{
 right: 69px;
}
}



#login-box{
 position:relative;
 margin:0 auto;
 top:100px;
 background-color:#fff;
 width:270px;
 height:270px;
 border-radius:40px;
}

#login{
 position:relative;
 margin:0 auto;
 text-align:center;
 top:70px;
}
#login input[type="text"],#login input[type="password"]{
 border:none;
 border-bottom:1px solid #CCC;
 padding:9px;
 direction:rtl;
}

*:focus{
 outline:none;
}

<div id="login-box">
            <div id="login">
                    <table align="center" cellpadding="0">
                        <tr>
                            <td>
                                <input type="text" autocomplete="off" name="username" />
                                <label for="username">שם משתמש</label>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input type="password" name="password" />
                                <label for="password">סיסמא</label>
                            </td>
                        </tr>
                    </table>
            </div><!-- end login -->
        </div><!-- end login box -->

Answer 7

I Googled around a bit, and found that there are some CSS pseudo-elements and pseudo-classes that can be used to style placeholders.

input:-ms-input-placeholder:focus{
    color: #999;
}

See this answer for more info: https://stackoverflow.com/a/2610741