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

我无法让IE11在将输入元素插入DOM后对其进行聚焦。该元素在聚焦后不会接收文本输入，但其占位符文本不再可见。元素由React创建，我通过

componentDidMount

中React的

refs

对象访问它：

componentDidMount() {
    this.refs.input.getDOMNode().focus();
}

我已尝试使用

setTimeout

添加短延迟：

componentDidMount() {
    setTimeout(() => this.refs.input.getDOMNode().focus(), 10);
}

我还尝试将

“1”

的

选项卡index

添加到输入中

如果有帮助，下面是呈现的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>

输入要开始的名称。
创造

---

在IE11中，是否有一些我不知道的让焦点工作的技巧？

我认为您的问题不是来自focus（）函数，而是来自选择器

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

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

因此，只需打开IE控制台（F12）并键入，它就可以聚焦搜索输入。如果是这样的话，那么问题就来自于选择器，它不是您可能认为的输入

---

它适用于我的IE 11.0.9600.17905

当css属性

-ms user select:none

应用于输入时，IE11中的问题被打破。因此，通过改变：

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

进入

我能解决这个问题。这是一个用于复制问题的代码笔：

如中所述，当设置css属性

-ms user select:none时，在IE11中运行
元素.focus（）
无效。
解决方法可以是

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

在IE中不起作用：

（代码：）

也在IE中工作：

（代码：）

注意：这种情况也会发生，例如

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

请参见
问题只存在于IE中。focus在Chrome和Firefox中运行良好。此外，输入还接收到某种部分焦点（我可以单击它，占位符文本会重新出现，但如果不再次单击它，我就无法键入文本）。我也没有使用选择器；我正在使用react的
refs
对象。那么问题可能来自
react的refs对象，我不知道这是什么，但如果是第三方库或其他东西，问题可能直接来自他们。我能看到的是，当用于输入时，
focus（）
在IE11上正常工作。
input
对于ref名称来说似乎是一个糟糕的选择。您是否使用了其他生命周期方法？我想知道调用
componentdiddupdate
是否弄乱了
componentDidMount
中的焦点设置。问题是由
-ms用户选择：none
css属性引起的。啊，我明白了-我想你可以接受你自己的答案。我可以。我只需要在发布后等待24小时。我很感激这个问题已经解决，但又提出了另一个问题。用户无法选择输入文本。如何解决这些问题？
:-ms-input-placeholder {
  -ms-user-select: none;
}