web-dev-qa-db-ja.com

IE11でJavaScriptを使用して入力をフォーカスできません

DOMに挿入された後、IE11に入力要素をフォーカスさせることができません。要素はフォーカスされた後、テキスト入力を受け取りませんが、そのプレースホルダーテキストは表示されなくなります。要素はReactによって作成され、refsにあるReactのcomponentDidMountオブジェクトを介してアクセスしています。

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

setTimeoutを使用して短い遅延を追加してみました。

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

また、"1"のtabIndexを入力に追加してみました。

役立つ場合は、レンダリングされた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で作業に集中するためのトリックはありますか？

javascriptinternet-explorerreactjsreact-jsx
7
SimpleJ

問題は、CSSプロパティ-ms-user-select: noneが入力に適用されると、IE11でフォーカスが壊れることでした。したがって、変更することによって：

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

に

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

私はその問題を解決することができました。問題を再現するためのコードペンは次のとおりです。 http://codepen.io/anon/pen/yNrJZz

9
SimpleJ

https://stackoverflow.com/a/3197194 で述べられているように、cssプロパティ_-ms-user-select: none_が設定されている場合、IE11ではelement.focus()を実行しても効果はありません。回避策は次のようになります

_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/1509 を参照してください

2
Esteban Gehring

あなたの問題はfocus（）関数から来ているとは思いません。セレクターから来ていると思います。

それを証明するために、IE11を開いて、次のコマンドを使用して、ページの右上にあるSO検索入力にフォーカスしようとしました。

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

したがって、IEコンソール（F12）を開いて入力すると、検索入力にフォーカスするはずです。そうであれば、問題は、入力ではないセレクターから発生します。考える。

それは私のIE 11.0.9600.17905で動作します

2
Vadorequest