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

Question

在将输入元素插入DOM后,我无法让IE11聚焦输入元素.聚焦后元素不会接收文本输入,但其占位符文本不再可见.该元素由React创建,我通过React的refs对象访问它componentDidMount:

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

我尝试使用setTimeout以下方法添加短暂延迟:

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

我也曾尝试加入tabIndex的"1"到输入.

如果它有用,这里是渲染的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中工作而我不知道？

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