Question

我无法让IE11在将输入元素插入DOM后将其聚焦。聚焦后元素不会接收文本输入，但其占位符文本不再可见。该元素由React创建，我通过componentDidMount中的React componentDidMount() { this.refs.input.getDOMNode().focus(); }对象访问它：

setTimeout

我尝试使用componentDidMount() { setTimeout(() => this.refs.input.getDOMNode().focus(), 10); }添加短暂延迟：

tabIndex

我还尝试在输入中添加"1" <div style={style}> <div style={labelStyle}>Enter a name to begin.</div> <form onSubmit={this.submit} style={formStyle}> <input tabIndex="1" ref="input" value={this.state.username} onChange={this.updateUsername} placeholder="New User Name" style={inputStyle} /> <button {...this.getBrowserStateEvents()} style={this.buildStyles(buttonStyle)}>Create</button> </form> </div>。

如果它有用，这里是渲染的JSX：

{{1}}

是否有一些技巧可以让我专注于在IE11中工作而我不知道？

Answer 1

当css属性-ms-user-select: none应用于输入时，问题集中在IE11中。所以通过改变：

* {
  -ms-user-select: none;
}

到

*:not(input) {
  -ms-user-select: none;
}

我能够解决问题。这是一个用于复制问题的codepen： http://codepen.io/anon/pen/yNrJZz

Answer 2

我不认为你的问题来自focus（）函数，我认为它来自选择器。

为了证明这一点，我刚刚打开IE11并尝试使用以下命令将SO搜索输入集中在页面的右上角：

document.getElementById('search')[0].focus()

所以，只需打开你的IE控制台（F12）并键入它，它应该集中搜索输入。如果是这样，那么问题就来自选择器，它不是您想象的输入。

适用于我的IE 11.0.9600.17905

Answer 3

如https://stackoverflow.com/a/31971940中所述，设置css属性element.focus()时，运行-ms-user-select: none在IE11中无效。解决方法可以是

element.style['-ms-user-select'] = 'text';
element.focus()
element.style['-ms-user-select'] = '';

在IE中不起作用：https://codepen.io/macjohnny-zh/details/WPXWvy
（代码：https://codepen.io/macjohnny-zh/pen/WPXWvy）

在IE中也可以使用：https://codepen.io/macjohnny-zh/details/LqOvbZ
（代码：https://codepen.io/macjohnny-zh/pen/LqOvbZ）

注意：这也会发生，例如

:-ms-input-placeholder {
  -ms-user-select: none;
}

请参见https://github.com/angular/material2/issues/15093

无法在IE11中使用JavaScript聚焦输入

3 个答案: