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

這是一個 IE 錯誤，在您的參考鏈接中。

看看jquery-placeholder 。 還將支持IE6！ 我不確定它是否可以開箱即用，因為 IE10 應該支持placeholder屬性，因此請檢查jQuery.fn.placeholder.input是否為true （更多信息在README 中）。 如果是，插件將不會執行任何操作，因此您可能需要覆蓋其檢查行為。

令人驚訝的是，該錯誤仍然處於活動狀態。

Answer 2

僅使用 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;
}