CODEWITHSUNDEEP
javascripthtmlinternet-explorer
henrywright
henrywright

Reputation: 10240

Internet Explorer 10 and 11 remove placeholder text when the input is focused

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.net/ompkwtz5/

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

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

Upvotes: 12

Views: 11370

Answers (2)

Никита Романец
Никита Романец

Reputation: 21

Found a solution only with css. https://jsfiddle.net/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;
}

Upvotes: 2

p4sh4
p4sh4

Reputation: 3291

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.

Upvotes: 1

Related Questions