Question

我正在使用jQuery开发webapp。我有添加3行输入字段的新功能。在创建这些DOM元素之后，我想要关注一个输入字段。我在必要的输入字段上调用jQuery focus（）函数。

问题是调用focus（）在IE6和FF3.5中工作正常，但在IE8中不起作用。

我试图在这里显示这个问题的简单工作示例，但是使用剥离版本的代码focus（）工作正常。所以我的猜测是，当我在IE8中调用focus（）时，DOM还没有准备好。为此，我尝试调用setTimeout（'myFocus（）'，400）。我取得了成功，在某些情况下，重点确实在起作用，但仍然并非总是如此。随机它不会聚焦我的输入字段。

问题是：是否有人遇到过类似的问题，是否有人知道如何解决这个问题？使用setTimeout感觉非常难看。

提前Tnx

编辑：26.08.2009

成功复制简单的例子。这是HTML + JS代码，它在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>\n\n\n<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>

重现： 1）从第一个下拉列表中选择值。您将看到第一次输入正在运行 2）从第二个下拉列表中选择值。您将看到该错误被复制。

然后在代码中你可以注释掉显示JS alert（）的行。奇怪的是，如果有这个警报（），那么在焦点工作正常之后。

希望这有助于了解我的问题所在。

P.S。我需要我的应用程序以这种方式工作 - 它从下拉列表中选择值后重新生成这些输入。这是我的应用程序的简化示例;）。

Answer 1

我的应用程序遇到了类似问题，但我无法重现代码的焦点问题。我的问题略有不同，因为我的页面有一个链接哈希，使IE不能给我的元素集中。

无论如何，为了解决这个问题，我添加了一个超时：

setTimeout(function () {
  $('.my-thing').focus();
}, 100);

用户不会注意到它，但它给了IE一点呼吸。

Answer 2

结合Kazys的解决方案，我发现这可以解决我的所有问题（使用IE8和.HTA文件）：

$("elem").blur();
$("elem").focus().focus();

我不知道为什么，但不知何故，两次调用焦点有助于IE浏览器。

编辑：我发现调用.show（）和.select（）也可以提供帮助。

Answer 3

奇怪的是，我遇到了同样的问题并使用普通的旧javascript解决了这个问题：

document.getElementById('friend_name').focus();

使用jQuery等效$('#friend_name').focus();在IE8中不起作用： - /

Answer 4

与IE8有类似的问题。我希望在打开时将输入对焦在对话框中。使用autoOpen = false。注意到焦点不仅适用于对话框中的第一个可聚焦元素。试过setTimeout但它有时只工作。聚焦前的模糊元素帮助了我。

$('#dialog').find('#name').blur();
$('#dialog').find('#name').focus();

Answer 5

由于您没有发布任何代码，您使用的是：

$(document).ready(function(){
    //code here
});

这将使html在加载html后运行。

你也应该使用live events。当你向dom添加输入时，它会自动将焦点绑定到它们。

$("p").live("focus", function(){
   alert( $(this).text() );
});

这意味着创建的每个p都将具有绑定到它的焦点。

Answer 6

这是目前设定焦点的最佳解决方案：

$（'。elt'）。fadeIn（200，function（）{$（'。elt'）。focus（）;}）;

Answer 7

这是一个老问题，但它在搜索中排名第一，所以想要更新。

我不知道是否曾经有过修复的时间，但我今天在IE11中再次使用jquery-2.1.3遇到了这个问题。我发现将焦点调用包装在setTimeout中，如上面的Ponny所述，对我来说效果最好。

我确实需要在某些情况下增加超时，以使其工作。

jQuery focus（）有时候在IE8中不起作用

7 个答案: