javascript - Internet Explorer 10 and 11 remove placeholder text when the input is focused - Stack Overflow

admin管理员组

文章数量:1356881

When using Internet Explorer 10 and 11, input placeholder text is removed if the input is focused using the autofocus attribute. For example:

<input type="textbox" value="" placeholder="Example text" autofocus>

Demo: /

How can I ensure the placeholder text isn't removed?

Ref:

When using Internet Explorer 10 and 11, input placeholder text is removed if the input is focused using the autofocus attribute. For example:

<input type="textbox" value="" placeholder="Example text" autofocus>

Demo: https://jsfiddle/ompkwtz5/

How can I ensure the placeholder text isn't removed?

Ref: https://connect.microsoft./IE/feedback/details/885747/ie-11-fires-the-input-event-when-a-input-field-with-placeholder-is-focused

• javascript
• html
• internet-explorer

Share Improve this question Follow asked May 6, 2015 at 2:38 henrywrighthenrywright 10.3k2525 gold badges9797 silver badges153153 bronze badges 3

• Also IE9, see stackoverflow./questions/5522164/… – Kevin Hakanson Commented May 6, 2015 at 2:58
• @KevinHakanson I think IE9 is slightly different. It doesn't support placeholders at all whereas 10 and 11 support them. 10 and 11 just handle them in a crazy way (they're removed when the input is focused). – henrywright Commented May 6, 2015 at 3:28
• you are correct, that answer linked to polyfills that work in both IE9, 10 and 11 to get expected behavior – Kevin Hakanson Commented May 6, 2015 at 19:54

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

Found a solution only with css. https://jsfiddle/nikdko/grc6v03a/

PS:withs input:valid + .fakePlaceholder {display:none } ie gets freeze

<input type="text" pattern=".+" required="" />
<span class = "fakePlaceholder">Fake placeholder />

input {
    position: relative;
    top: 0;
    border: 1px solid #999;
    z-index: 1;
}
.fakePlaceholder{
    color: #7D838A;
    position: absolute;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
    pointer-events: none;
    left: 0;
    z-index: 1;
    padding-left: 10px;
}
input:valid {
    background-color: #FFFFFF;
    z-index: 2;
}

It's an IE bug, the one in your reference link.

Take a look at jquery-placeholder. Will also support IE6! I'm not sure if it will work out of the box though, because IE10 is supposed to support the placeholder attribute, so check if jQuery.fn.placeholder.input is true (more info in the README). If it is, the plugin won't do anything, so you might need to override its checking behaviour.

Amazing that the bug is still active.

本文标签： javascriptInternet Explorer 10 and 11 remove placeholder text when the input is focusedStack Overflow