$ .focus()不起作用

Question

jQuery focus()文档的最后一个例子说明

$('#id').focus()

应该使输入集中(主动).我似乎无法让这个工作.

即使在这个网站的控制台上,我也在尝试搜索框

$('input[name="q"]').focus()

而我什么都没得到.有任何想法吗？

Answer 1

实际上,只要你不专注于控制台,你给关注这个网站的例子就可以了.不工作的原因仅仅是因为它没有从开发控制台窃取焦点.如果您在控制台中运行以下代码,然后在浏览器窗口中快速单击,您将看到它对焦于搜索框:

setTimeout(function() { $('input[name="q"]').focus() }, 3000);

至于你的另一个,过去给我带来麻烦的一件事就是事件顺序.您不能在未附加到DOM的元素上调用focus().您尝试聚焦的元素是否已附加到DOM？

Answer 2

在网上的其他地方找到了解决方案......

$('#id').focus();

不工作.

$('#id').get(0).focus();

做得好.

Answer 3

这里的一些答案建议使用setTimeout延迟关注目标元素的过程.其中一个提到目标在模态对话框中.如果setTimeout不知道解决方案的具体细节,我无法进一步评论解决方案的正确性.但是,我认为我应该在这里提供一个答案来帮助那些遇到这个问题的人,就像我一样

事情的简单事实是你不能专注于一个尚未可见的元素.如果遇到此问题,请确保在尝试聚焦目标时实际可见目标.在我自己的情况下,我正在做这些事情

$('#elementid').animate({left:0,duration:'slow'});
$('#elementid').focus();

这没用.我才意识到发生了什么事情,当我执行$("#elementid")上.对焦()`从控制台所做的工作.差异 - 在目标上方的代码中,由于动画可能不完整,因此无法确定目标是否可见.这就是线索

$('#elementid').animate({left:0,duration:'slow',complete:focusFunction});

function focusFunction(){$('#elementid').focus();}

按预期工作.我最初也提出了一个setTimeout解决方案,它也有效.然而,任意选择的超时必然会迟早破坏解决方案,这取决于主机设备进行确保目标元素可见的过程的速度.

Answer 4

如果你使用bootstrap + modal,这对我有用:

  $(myModal).modal('toggle');
  $(myModal).on('shown.bs.modal', function() {
    $('#modalSearchBox').focus()
  });

Answer 5

以防万一其他人偶然发现这个问题并且遇到了同样的情况 - 我试图在点击另一个元素后设置焦点,但焦点似乎没有效果.事实证明我只需要一个e.preventDefault();- 这是一个例子:

$('#recipients ul li').mousedown(function(e) {
    // add recipient to list
    ...
    // focus back onto the input
    $('#message_recipient_input').focus();
    // prevent the focus from leaving
    e.preventDefault();
});

这有助于:

如果从mousedown事件处理程序调用HTMLElement.focus(),则必须调用event.preventDefault()以防止焦点离开HTMLElement.资料来源:https://developer.mozilla.org/en/docs/Web/API/HTMLElement/focus

Answer 6

我也遇到了这个问题。在我的例子中有效的解决方案是使用 HTML 元素上的 tabindex 属性。

我在列表中使用了ng-repeat一些 li 元素，但无法使用 .focus() 将焦点集中到第一个 li 上，因此我只是在循环期间将 tabindex 属性添加到每个 li 中。

所以现在<li ng-repeat="user in users track by $index" tabindex="{{$index+1}}"></li>

+1 是从 0 开始的索引。在调用 .focus() 函数之前还要确保该元素存在于 DOM 中

我希望这有帮助。