CODEWITHSUNDEEP
jqueryinternet-explorerfocus
Ben
Ben

Reputation: 51

jquery focus not working in IE

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>

Upvotes: 3

Views: 3053

Answers (2)

kesse
kesse

Reputation: 158

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.

Upvotes: 1

Code Spy
Code Spy

Reputation: 9954

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]

Upvotes: 1

Related Questions