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

IT技术 javascript jquery internet-explorer-8
2021-02-28 06:56:17

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

问题是调用 focus() 在 IE6 和 FF3.5 中工作正常,但在 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() 之后它的焦点工作正常。

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

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

6个回答

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

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

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

用户不会注意到,但它让 IE 有时间喘口气。

你知道为什么这个解决方案有效吗?(哦,谢谢。它绝对有效。)
2021-04-23 06:56:17
来自一些古老的文档:要给文本框焦点并预选框中的所有文本,请在元素上使用 focus() 和 select() 方法的序列。如果此序列发生在窗口更改后(例如警报对话框关闭后),请将这些方法放在单独的函数中,并通过对话框的 alert() 方法之后的 setTimeout() 方法调用此函数。这允许 IE/Windows 正确地对语句执行进行排序。
2021-05-18 06:56:17
感谢您的解决方法。丑陋的修复,但我找不到任何更优雅的解决方案..如果有人找到一个解释,我会很乐意!在我的情况下,即使只有 1 毫秒的超时,它似乎也能工作,而不是 1 或 100 毫秒对用户来说是明显的:)
2021-05-21 06:56:17

结合 Kazys 的解决方案,我发现这可以解决我的所有问题(使用 IE8 和 .HTA 文件):

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

我不知道为什么,但不知何故两次调用 focus 有助于 IE。

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

我还不知道什么。
2021-04-29 06:56:17
$("elem").focus().select(); 也为我工作,仍然不确定为什么会发生这个问题(专注于文本框,但之前没有选择它)。
2021-05-01 06:56:17
$("id").focus().focus();对我有用,使用它有什么缺点吗?@最大混乱
2021-05-13 06:56:17
在 IE11 中也为我修复了它!谢谢 :)
2021-05-21 06:56:17

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

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

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

这是您可能想要向 jQuery 基金会报告的内容。
2021-05-08 06:56:17

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

$('#dialog').find('#name').blur();
$('#dialog').find('#name').focus();
谢谢!这正是当延迟无济于事时需要做的事情。
2021-04-26 06:56:17

由于您尚未发布任何代码,因此您正在使用:

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

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

你也应该使用现场活动当您向 dom 添加输入时,将自动将焦点绑定到它们。

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

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

我想关注一些输入,但我不需要知道那个焦点事件。PS jQuery 当前稳定版本不支持 live 为“focus”事件。
2021-04-23 06:56:17