JQuery focus() sometimes not working in IE8

Asked
Active3 hr before
Viewed126 times

6 Answers

workingjquerysometimesfocus
90%

I am developing webapp using jQuery. I have functionality that adds new row of 3 input fields. After creating these DOM elements I want to focus one of input fields. I am doing it with calling jQuery focus() function on necessary input field.,This is the best solution for the moment to set focus:, Interesting general solution to a problem ,Not noticeable by a user but it gives IE a moment to breathe.

Anyway, to get around the problem I added a timeout:

setTimeout(function() {
   $('.my-thing').focus();
}, 100);
load more v
88%

Problem is that calling focus() works fine in IE6 and FF3.5, but not working in IE8.,I have no idea why, but somehow calling focus twice helps IE along.,I was trying to make simple working example of this problem for showing it here, but with stripped version of code focus() is working fine. So my guess was that DOM is not ready yet when I call focus() in IE8. For this I tried calling setTimeout('myFocus()',400). I had success and in some of cases focus was really working but still not always. Randomly it does not focus my input field.,I did need to increase the timeout in some cases, to get it to work.

Succeeded to reproduce on simple example. Here is HTML+JS code that reproduces this bug on IE8.

<html>
<head>
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        function performChanged() {
          formChanged = true;
        }

        function handleChange() {
          var parentDiv = $('#container');
          newValue = $(html).html();

          parentDiv.html(newValue);
          $(".sel1",parentDiv).bind('change',handleChange);
          //alert('Uncomment this and after alert focus will be on input');
          $("input.cv_values",parentDiv).focus();
        }

        $(document).ready(function() {
          $('.trackChange').bind('change', handleChange);
        });
        var html = '<div class=""div1"">
<select class=""sel1"" id=""sel1"" name=""sel1""><option value=""""></option>
<option value=""11"">Select me to see problem</option>
</select>


<input class=""cv_values"" id=""sel3"" name=""sel3"" size=""30"" type=""text"" value="""" /><br/>Focus should in input field. With alert it is but without alert focus is not there</div>';
    </script>
</head>
<body>
    <select class="trackChange" onchange='performChanged();'>
      <option value=""></option>
      <option value="1" >Select me to generate new inputs</option>
    </select>

    <div id="container"></div>
</body>
load more v
72%

Problem is that calling focus() works fine in IE6 and FF3.5, but not working in IE8.,I was trying to make simple working example of this problem for showing it here, but with stripped version of code focus() is working fine. So my guess was that DOM is not ready yet when I call focus() in IE8. For this I tried calling setTimeout('myFocus()',400). I had success and in some of cases focus was really working but still not always. Randomly it does not focus my input field.,I was calling the meta tag...,Using jQuery equivalent $('#friend_name').focus(); didn't work in IE8 :-/

Succeeded to reproduce on simple example. Here is HTML+JS code that reproduces this bug on IE8.

<html>
<head>
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        function performChanged() {
          formChanged = true;
        }

        function handleChange() {
          var parentDiv = $('#container');
          newValue = $(html).html();

          parentDiv.html(newValue);
          $(".sel1",parentDiv).bind('change',handleChange);
          //alert('Uncomment this and after alert focus will be on input');
          $("input.cv_values",parentDiv).focus();
        }

        $(document).ready(function() {
          $('.trackChange').bind('change', handleChange);
        });
        var html = '<div class="div1">n<select class="sel1" id="sel1" name="sel1"><option value=""></option>n<option value="11">Select me to see problem</option>n</select>nnn<input class="cv_values" id="sel3" name="sel3" size="30" type="text" value="" /><br/>Focus should in input field. With alert it is but without alert focus is not there</div>';
    </script>
</head>
<body>
    <select class="trackChange" onchange='performChanged();'>
      <option value=""></option>
      <option value="1" >Select me to generate new inputs</option>
    </select>

    <div id="container"></div>
</body>
load more v
65%

Actual: IE7: You cannot focus to any inputs on the ALL page! (check bottom input) IE8: Input has problem with focus on the some time (sometimes forever)... After 3 seconds and 3 click browser focus on it... IE9: I cannot reproduce this issue on this simple case. But on my very rich application, IE9 has problem with focus too. , I dynamically create iframe with <input type="text" /> tag and focus on it. But on the second creation, all inputs on the page have problem with focus. , I could not reproduce this problem on IE8 in a VM, but it did fail the way you described in IE7 on Browserstack. The problem does not occur if you change the jQuery creation to this method: , Not really a solution, but adding the following code to the end of the iframe creation method made all input fields focusable.

I could not reproduce this problem on IE8 in a VM, but it did fail the way you described in IE7 on Browserstack. The problem does not occur if you change the jQuery creation to this method:

  var $iframe = $("<iframe />");
  $iframe.attr("src", "iframe.html");
  $("#qres_modal_dialog_contents").html("").append($iframe);
load more v
75%

In the second field "disabled and blur" the field will loose focus in every browser except IE 11 (tested also with IE8 native and all simulated IE 11 versions like 10,9,8). In IE the focus is still on that field, you can type in, but all delegated events that require a focus not fire anymore like "keyup".,Good news is it's fixed in the new Microsoft Edge browser but IE 11 will stay as it is forever.,Thanks for the report. Unfortunately, all versions of IE (even IE 11) fire blur & focus events asynchronously and there is no easy way to work around it generically enough to include the workaround in jQuery.,Update: It works well with the brand new Micorosft Edge as expected, only native IE have this problem.

Thanks for the report. Unfortunately, all versions of IE (even IE 11) fire blur & focus events asynchronously and there is no easy way to work around it generically enough to include the workaround in jQuery.

blur

Thanks for the report. Unfortunately, all versions of IE (even IE 11) fire blur & focus events asynchronously and there is no easy way to work around it generically enough to include the workaround in jQuery.

focus
load more v
40%

Cross-browser JavaScript problems,In this section, we'll look at some of the more common cross-browser JavaScript problems. We'll break this down into:,These days, most cross-browser JavaScript problems are seen:,Handling common JavaScript problems

npm install - g jshint
load more v

Other "working-jquery" queries related to "JQuery focus() sometimes not working in IE8"