Unable to focus an input using JavaScript in IE11
Solution 1
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;
}
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
Solution 2
As stated in https://stackoverflow.com/a/31971940, running element.focus()
has no effect in IE11 when the css property -ms-user-select: none
is set.
A workaround can be
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)
Works in IE, too: https://codepen.io/macjohnny-zh/details/LqOvbZ
(Code: https://codepen.io/macjohnny-zh/pen/LqOvbZ)
Note: this also happens e.g. for
:-ms-input-placeholder {
-ms-user-select: none;
}
See https://github.com/angular/material2/issues/15093
Solution 3
I don't think that your issue is coming from the focus() function, I think it's coming from the selector.
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:
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.
It works on my IE 11.0.9600.17905
SimpleJ
Updated on June 16, 2022Comments
-
SimpleJ almost 2 years
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 incomponentDidMount
:componentDidMount() { this.refs.input.getDOMNode().focus(); }
I have tried adding a short delay using
setTimeout
:componentDidMount() { setTimeout(() => this.refs.input.getDOMNode().focus(), 10); }
I have also tried adding a
tabIndex
of"1"
to the input.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>
Is there some trick to getting focus to work in IE11 that I'm unaware of?
-
SimpleJ almost 9 yearsThe issue only exists in IE though. The focus works fine in Chrome and Firefox. Also the input is receiving some kind of partial focus (I can click out of it, and the placeholder text reappears, but I can't type text in without clicking it again). I'm also not using a selector; I'm using react's
refs
object. -
Vadorequest almost 9 yearsThen maybe the issue comes from
react's refs object
, I don't know what this is, but if it's a third part library or something the issue could come from them directly. What I can see is thatfocus()
works correctly on IE11 when used on an input. -
Rahul Shinde about 5 yearsI appreciate this issue has been fixed but raised another one. The user can not able to select the input text. How to resolve those issues?