无法在IE11中使用JavaScript集中输入 [英] Unable to focus an input using JavaScript in IE11

问题描述

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

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 refs object in componentDidMount:

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

我尝试使用setTimeout添加短暂延迟:

I have tried adding a short delay using setTimeout:

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

我还尝试将"1"的tabIndex添加到输入中.

I have also tried adding a tabIndex of "1" to the input.

如果有帮助的话，这里是渲染的JSX:

In case it's helpful, here is the rendered 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中工作吗?

Is there some trick to getting focus to work in IE11 that I'm unaware of?

推荐答案

当将CSS属性-ms-user-select: none应用于输入时，解决了IE11中的问题.因此，通过更改:

The issue was focusing in IE11 is broken when the css property -ms-user-select: none is applied to the input. So by changing:

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

进入

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

我能够解决问题.这是用于重现该问题的代码库: http://codepen.io/anon/pen/yNrJZz

I was able to solve the problem. Here is a codepen for reproducing the issue: http://codepen.io/anon/pen/yNrJZz

这篇关于无法在IE11中使用JavaScript集中输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！