Question

last example of jQuery's focus() documentation州

$('#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();

这不起作用。我只是意识到当我执行$（＆＃39; #elementid＆＃39;）时焦点（）`来自控制台做了的工作。差异 - 在目标上方的代码中，由于动画可能不是完成，因此无法确定目标是否可见。而且有线索

$('#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

我意识到这已经过时了，但今天却遇到了它。没有一个答案适合我，我发现有效的是setTimeout。我希望我的焦点放在一个模态的输入字段上，使用setTimeout工作。希望这有帮助！

Answer 7

我也有这个问题。在我的案例中起作用的解决方案是在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中

我希望这会有所帮助。

Answer 8

在focus（）之前添加一个延迟。 200毫秒就够了

function focusAndCursor(selector){
  var input = $(selector);
  setTimeout(function() {
    // this focus on last character if input isn't empty
    tmp = input.val(); input.focus().val("").blur().focus().val(tmp);
  }, 200);
}

Answer 9

刚才又遇到了这个问题，信不信由你，我要做的就是关闭开发人员工具。显然，“控制台”选项卡的焦点优先于页面内容。

Answer 10

对于那些因为你使用＆＃34; $（元素）.show（）＆＃34;而无法工作的人。我从下一个方面解决了它：

 var textbox = $("#otherOption");
 textbox.show("fast", function () {
    textbox[0].focus();
  });

所以你不需要一个计时器，它将在show方法完成后执行。

Answer 11

附加解决方案有一个问题，其中focus（）似乎没有起作用，但最终结果表明所需要的是滚动到正确的位置：

https://stackoverflow.com/a/43342974/1335717

Answer 12

确保该元素及其父元素可见。您不能将焦点放在隐藏的元素上

Answer 13

专业提示。如果要从开发人员控制台打开焦点，则只需将控制台作为选项标签中的单独窗口打开即可。最新的Firefox和Chrome支持此功能。

Answer 14

我从 Chrome 的 DevTool 控制台测试了代码，但焦点部分不起作用。我后来发现这个问题只有在我从 DevTool 运行它时才会出现，如果我将代码实现到网站，它就可以正常工作。实际上，该元素获得了焦点，但 DevTool 立即将其删除。

Answer 15

在我的情况下，如果其他人遇到这种情况，我会加载一个表单以供查看，用户单击“编辑”，ajax 获取并返回值并更新表单。

就在这之后，我尝试了所有这些，除了：

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

我不得不更改为（由于 ajax）：

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

我最终只使用了 $("#q") 即使它是一个输入：

setTimeout(function () { $("#q").focus() }, 500);

Answer 16

你可以试试这个id是tries

window.location.hash = '#tries';

Answer 17

我遇到了类似的问题，将事件包装在 <motion.svg> 函数中非常适合我。但不知何故，感觉这不是解决它的最佳方法（手动延迟事件）。

但是，在我的情况下，焦点事件没有触发，因为元素是不可见/隐藏的，事实证明，当我在 setTimout 函数内触发焦点事件时，元素在几毫秒后可见（当元素被点击并且元素被聚焦时触发）

这对我有用：

element.on("focus")

Answer 18

对于我来说，我必须指定一个标签索引（-1，如果只能通过脚本进行聚焦）

<div tabindex='-1'>
<!-- ... -->
</div>

$ .focus（）不起作用

18 个答案: