jquery focus not working in IE

Question

I know others have run into this problem before. I have searched and tried all sorts of different solutions (including JQuery focus and JQuery Problem .... Focus not working and JQuery focus() is not focusing in IE but it is in Chrome) yet nothing has worked.

When the code runs in FF and Chrome, focus follows along as it should. However, in IE (I'm using IE9), no such luck. The focus is not placed on the input text. Any assistance would be appreciated.

// textInputArray contains the input field along with some other html with instructions
//  about the input field
$("input.answerBox").live("keypress", function(event) {
    if ((event.which == 13) && (i < textInputArrayLength)){
                $("div.textInput").html(textInputArray[i])
                    .fadeIn(200);
               $("input.focus:last").focus();
               i++;
            }
 }

Again, everything works as expected in FF and Chrome, but not IE. The contents of the textInput div is replaced, but the input text box does not receive focus in IE.

Edit: html as requested

<div id="menuBar">
<ul class="dropdown">
<li class="menuLi"><a href="#" class="blank">Item 1</a>
<ul class="sub_menu">
<li class="menuLi"><a href="#" class="blank">Number</a>
<ul class="sub_sub_menu">
<li class="menuLi"><a href="/test/index.php" class="menuItem blank">Sub Item 1</a></li>
<li class="menuLi"><a href="/test/index.php" class="menuItem blank">Sub Item 2</a></li>
</ul>
</ul>
</ul>
<br>
</div>
<div id="main">
<h1 class="header1">Quick Quiz</h1>
<div class="textInput">
</div>
</div>
<div class="footer"></div>

But its working fine in IE 7 look at this http://jsfiddle.net/3s8gr/1/ Run it in IE 7 or whatever version you have — Code Spy, May 19 '12 at 10:06

score 1 · Answer 1 · answered May 19 '12 at 10:48

1

Its the .fadeOut(100) which is causing some type of clash in IE

It works fine if we change

$("div.textInput").fadeOut(100).html('<input class="textBox focus" type="text">').fadeIn(200);

With

 $("div.textInput").html('<input class="textBox focus" type="text">').fadeIn(200);

http://jsfiddle.net/8mpRg/1/ [Run in IE]

answered May 19 '12 at 10:48

Code Spy

9,626
4
66
46

Ok, this has solved the first problem of the box not initially getting focus in IE. However, the problem still persists on subsequent iterations of the loop. I've amended the code to show more details. – Ben May 19 '12 at 21:30
In addition to `fadeOut()`, your `fadeIn()` at the end of the line will also have a similar effect. The reason for this is that IE doesn't support opacity/fading very well; it can only do it via ActiveX and the `filter` style, which means that it's not native browser functionality. This leads to all kinds of quirks and weirdness when you try to combine it with other features. In short, fading in IE is best avoided, even with jQuery to help you. – Spudley May 20 '12 at 09:18

score 1 · Answer 2 · edited Oct 13 '15 at 15:01

My IE focus problem also had to do with my use of fadeOut() & fadeIn(). My code in short sets focus, blinks a text box twice and resets focus:

$('#friend_name').focus();
$('#friend_name').fadeOut(400);
$('#friend_name').fadeIn(400);
$('#friend_name').fadeOut(400);
$('#friend_name').fadeIn(400);
setTimeout(function () {
  $('#friend_name').focus();
}, 1300);

I found that in order for the focus function to work in IE I needed to add a delay that is longer then the combined delay of the fadexx functions.

In Chrome I could omit the delayed $('#friend_name').focus() call.

jquery focus not working in IE

2 Answers2