2

This question has a reference to the solution posted here. https://stackoverflow.com/a/2600261/5086633

I am facing similar issue in IE but even after adding much delay 200 this is not working as expected in my application. The input box gets focused only intermittently, it skips to focus on the input field even after the page gets rendered in IE. I also tried calling the setTimeout function from $(document).ready(function(){ and $(window).load(function() { as specified below with no success.

This code works fine when I test it locally and as a plain html file but not in my application.

Could anyone help me fix /or provide a clue to debug/ this issue in IE, so that input field gets the focus each time the page is rendered in IE?

Footnote:- It is working fine in Firefox (without delay) and in Chrome small delay is required for focus to work. 

 $(document).ready(function(){

    setTimeout(function() { document.getElementById('testfocus').focus(); }, 200);

});

$(window).load(function() {
 // executes when complete page is fully loaded, including all frames, objects and images
setTimeout(function() { document.getElementById('testfocus').focus(); }, 200);
});


setTimeout(function() { document.getElementById('testfocus').focus(); }, 200);
<html>
<head>
</head>
<body>
 
<input id="testfocus"/>

</body>
</html>
Community
  • 1
  • 1
yeppe
  • 679
  • 1
  • 11
  • 43

4 Answers4

1

Very odd. It works for me... which isn't much of an answer (win7, IE11, jquery 2.2.4). What specific IE/OS/Jquery version are you using?

Does the "run code snippet" button below your code above work/not work?

What about this jsfiddle: https://jsfiddle.net/u68gmzyc/ ?

$(document).ready(function(){
    document.getElementById('testfocus').focus();
});

Also... can you check the console for any javascript error messages? Maybe something else is failing and the side effect is that your code is not actually running?

user2845090
  • 147
  • 3
  • 14
1

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.

Community
  • 1
  • 1
ankit9j
  • 254
  • 2
  • 7
1

Also, if the aim is merely to focus a specific element on page load, you could add the autofocus attribute to it. Then it'll focus automatically without the need for JS.

<input type="text" autofocus="autofocus" id="testfocus" />
Andries van Wyk
  • 41
  • 2
0

Fixed this issue myself played around with this focus delay function, increased it, and found that the input button gets the focus when the page is rendered setTimeout(function() { document.getElementById('testfocus').focus(); }, 200); However, I don't know the real reason why this delay is required in IE and Chrome browsers.

yeppe
  • 679
  • 1
  • 11
  • 43