无法在 IE11 中使用 JavaScript 聚焦输入
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31947590/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Unable to focus an input using JavaScript in IE11
提问by SimpleJ
I'm unable to get IE11 to focus an input element after it is inserted into the DOM. The element won't receive text input after being focused, but its placeholder text is no longer visible. The element is created by React, and I'm accessing it through React's refsobject in componentDidMount:
将输入元素插入 DOM 后，我无法让 IE11 将其聚焦。元素在获得焦点后不会接收文本输入，但其占位符文本不再可见。该元素由 React 创建，我通过 React 中的refs对象访问它componentDidMount：
componentDidMount() {
this.refs.input.getDOMNode().focus();
}
I have tried adding a short delay using setTimeout:
我尝试使用setTimeout以下方法添加短暂延迟：
componentDidMount() {
setTimeout(() => this.refs.input.getDOMNode().focus(), 10);
}
I have also tried adding a tabIndexof "1"to the input.
我也曾尝试加入tabIndex的"1"到输入。
In case it's helpful, here is the rendered JSX:
如果有帮助，这里是渲染的 JSX：
<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>
Is there some trick to getting focus to work in IE11 that I'm unaware of?
是否有一些技巧可以让我在 IE11 中专注于工作，而我不知道？
回答by SimpleJ
The issue was focusing in IE11 is broken when the css property -ms-user-select: noneis applied to the input. So by changing:
当 css 属性-ms-user-select: none应用于输入时，问题是聚焦在 IE11 中。所以通过改变：
* {
-ms-user-select: none;
}
into
进入
*:not(input) {
-ms-user-select: none;
}
I was able to solve the problem. Here is a codepen for reproducing the issue: http://codepen.io/anon/pen/yNrJZz
我能够解决这个问题。这是重现问题的代码笔：http://codepen.io/anon/pen/yNrJZz
回答by Vadorequest
I don't think that your issue is coming from the focus() function, I think it's coming from the selector.
我不认为你的问题来自 focus() 函数，我认为它来自选择器。
To prove it I just opened my IE11 and tried to focus the SO search input on the top right of the page using the following command:
为了证明这一点，我刚刚打开了 IE11，并尝试使用以下命令将 SO 搜索输入集中在页面右上角：
document.getElementById('search')[0].focus()
So, just open your IE console (F12) and type that, it should focus the search input. If so, then the issue is coming from the selector which isn't an input as you may think.
因此，只需打开您的 IE 控制台 (F12) 并输入它，它就会聚焦搜索输入。如果是这样，那么问题来自选择器，它不是您想象的输入。
It works on my IE 11.0.9600.17905
它适用于我的 IE 11.0.9600.17905
回答by Esteban Gehring
As stated in https://stackoverflow.com/a/31971940, running element.focus()has no effect in IE11 when the css property -ms-user-select: noneis set.
A workaround can be
如https://stackoverflow.com/a/31971940 中所述，设置element.focus()css 属性后，在 IE11 中运行无效-ms-user-select: none。解决方法可以是
element.style['-ms-user-select'] = 'text';
element.focus()
element.style['-ms-user-select'] = '';
Does not work in IE: https://codepen.io/macjohnny-zh/details/WPXWvy
(Code: https://codepen.io/macjohnny-zh/pen/WPXWvy)
不适用于 IE：https: //codepen.io/macjohnny-zh/details/WPXWvy
（代码：https: //codepen.io/macjohnny-zh/pen/WPXWvy）
Works in IE, too: https://codepen.io/macjohnny-zh/details/LqOvbZ
(Code: https://codepen.io/macjohnny-zh/pen/LqOvbZ)
也适用于 IE：https: //codepen.io/macjohnny-zh/details/LqOvbZ
（代码：https: //codepen.io/macjohnny-zh/pen/LqOvbZ）
Note: this also happens e.g. for
注意：这也会发生，例如
:-ms-input-placeholder {
-ms-user-select: none;
}
