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

It's an IE bug，您参考链接中的那个。

看看jquery-placeholder。还将支持IE6！我不确定它是否可以开箱即用，因为IE10应该支持placeholder属性，因此请检查jQuery.fn.placeholder.input是true（更多信息，请参阅README）。如果是，则插件不会做任何事情，因此您可能需要覆盖其检查行为。

令人惊讶的是，该错误仍然存在。

Answer 2

仅使用CSS找到了解决方案。 https://bl.ocks.org/d3noob/a22c42db65eb00d4e369

PS：带有输入：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;
}

当输入被聚焦时，Internet Explorer 10和11会删除占位符文本

2 个答案: