autofocus attribute on input field not working in IE 11
IE11 doesn`t support autofocus (despite is in caniuse).
You can check How to make input autofocus in internet explorer?
Focus is not working in IE even after adding much delay
https://stackoverflow.com/a/2600261/5086633 is for IE7.
Following works each time on all browsers.
<body onload="document.getElementById('testfocus').focus();">
You can see if the favicon shows a rotating circle(loading) as the focus will happen only when the loading is complete.
I tried with following which is working on all browsers:
<html>
<head></head>
<body onload="document.getElementById('testfocus').focus();">
<iframe src="http://www.healthcarereformdigest.com/wp-content/uploads/2014/07/forms.jpg"></iframe>
<input id="testfocus"/>
</body>
</html>
(Added iFrame and that image as its heavy and it takes looong to load).
If its failing in your app, you can press Tab to see which element has the focus and then Inspect that as it might have multiple focus() statements.
Unable to focus an input using JavaScript in 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;
}
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
How to use autofocus without canceling placeholder in IE
You can workaround with this:
http://samplacette.com/html-5-placeholder-autofocus-cross-browser-support-for-ie/
It explains the problem and gives you a polyfill to avoid it.
https://github.com/SamPlacette/placeholdr
good luck
Related Topics
Create Tree View with Horizontal and Vertical Lines Showing The Connectivity Using CSS
HTML: Cursor Showing in Readonly Input Text
Yet Another Divs Vs Tables Issue: Forms
Making a Flex Item Float Right
Make a Perfect Circle Around a Div of Variable Height
CSS Float-Right Not Working in Bootstrap 4 Navbar
Fast and Responsive Interactive Charts/Graphs: Svg, Canvas, Other
Block Level Elements Inside Inline Elements
Multiple Select in Safari iOS 7
What's The Point of Valid CSS/HTML