javascript - Internet Explorer 10 和 11 在输入聚焦时删除占位符文本

Question

使用 Internet Explorer 10 和 11 时，如果使用 autofocus 属性聚焦输入，输入占位符文本将被删除。例如:

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

演示: https://jsfiddle.net/ompkwtz5/

如何确保占位符文本未被删除？

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

Answer 1

只用 css 找到了解决方案。 https://jsfiddle.net/nikdko/grc6v03a/

PS:withs input:valid + .fakePlaceholder {display:none } 即卡住

<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;
}