jQuery focus() 有时在 IE8 中不起作用答案

【问题标题】：jQuery focus() sometimes not working in IE8jQuery focus() 有时在 IE8 中不起作用
【发布时间】：2010-11-22 13:21:12
【问题描述】：

我正在使用 jQuery 开发 webapp。我具有添加 3 个输入字段的新行的功能。创建这些 DOM 元素后，我想关注其中一个输入字段。我正在通过在必要的输入字段上调用 jQuery focus() 函数来做到这一点。

问题是在 IE6 和 FF3.5 中调用 focus() 可以正常工作，但在 IE8 中不能正常工作。

我试图为这个问题制作一个简单的工作示例，以便在此处显示它，但是使用剥离版本的代码 focus() 工作正常。所以我的猜测是，当我在 IE8 中调用 focus() 时，DOM 还没有准备好。为此，我尝试调用 setTimeout('myFocus()',400)。我取得了成功，在某些情况下，专注确实有效，但并非总是如此。随机它不会关注我的输入字段。

问题是：有人遇到过类似的问题吗？有人知道如何解决吗？使用 setTimeout 感觉像是非常丑陋的解决方法。

提前发送

编辑：26.08.2009

在简单示例上成功重现。这是在 IE8 上重现此错误的 HTML+JS 代码。

<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() 的行。奇怪的是，如果有这个 alert() 之后它的焦点就可以正常工作了。

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

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

【问题讨论】：

发布代码 sn-p。让事情变得更容易。
您是否尝试过关注窗口的“加载”事件（而不是“DOMContentLoaded”，又名 - document.ready(...) - 一）？

标签： javascript jquery internet-explorer-8

【解决方案1】：

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

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

在某些情况下，我确实需要增加超时时间才能使其正常工作。

【讨论】：

【解决方案2】：

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

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

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

编辑：我发现调用 .show() 和 .select() 也有帮助。

【讨论】：

$("id").focus().focus(); 对我有用，使用它有什么缺点吗？ @Max 混乱
我还没有意识到这一点。
在 IE11 中也为我修复了它！谢谢:)
$("elem").focus().select(); 也为我工作，仍然不确定为什么会发生这个问题（专注于文本框，但之前没有选择它）。

【解决方案3】：

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

$('.elt').fadeIn(200, function() {$('.elt').focus();});

【讨论】：

【解决方案4】：

奇怪的是，我遇到了同样的问题，并使用普通的旧 javascript 解决了它，如下所示：

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

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

【讨论】：

这是您可能想要向 jQuery 基金会报告的内容。

【解决方案5】：

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

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

【讨论】：

谢谢！当延迟无济于事时，这正是人们需要做的。

【解决方案6】：

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

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

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

用户不会注意到，但它让 IE 有一点喘息的机会。

【讨论】：

你知道为什么这个解决方案有效吗？（哦，谢谢。它确实有效。）
来自ancient documentation：要赋予文本框焦点并预先选择框中的所有文本，请在元素上使用一系列 focus() 和 select() 方法。如果此序列要在窗口更改后发生（例如在警报对话框关闭后），请将这些方法放在单独的函数中，并通过对话框的 alert() 方法之后的 setTimeout() 方法调用此函数。这允许 IE/Windows 正确排序语句执行。
感谢您的解决方法。丑陋的修复，但我找不到任何更优雅的解决方案。如果有人找到一个解释，我会很高兴！在我的情况下，即使只有 1 毫秒的超时，它似乎也可以工作，而不是 1 或 100 毫秒对用户来说是明显的:)

【解决方案7】：

由于您尚未发布任何代码，您正在使用：

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

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

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

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

这意味着每一个被创建的 p 都会绑定一个焦点。

【讨论】：

我想关注一些输入，但我不需要知道那个焦点事件。附言jQuery 当前稳定版本不支持 live for "focus" 事件。