$.focus() 不起作用

实际上，你给出的专注于这个网站的例子工作得很好，只要你不专注于控制台。这种方法不起作用的原因很简单，因为它没有从开发控制台窃取注意力。如果你在控制台中运行以下代码，然后快速单击浏览器窗口，你会看到它聚焦搜索框:

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

至于你的另一件事，过去唯一给我带来麻烦的是事件的顺序。不能在未附加到DOM的元素上调用focus()。您试图关注的元素是否已经附加到DOM?

在网上找到了一个解决方案…

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

没有工作。

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

所做的工作。

我知道这是旧的，但今天偶然发现的。没有一个答案对我有用，我发现有用的是setTimeout。我希望我的焦点放在一个模式的输入字段，使用setTimeout工作。希望这能有所帮助!

这里的一些答案建议使用setTimeout来延迟关注目标元素的过程。其中一个提到目标在模态对话框中。我不能进一步评论__abc0解决方案的正确性，因为不知道它在哪里被使用的具体细节。

问题的简单事实是您不能将焦点集中在还不可见的元素上。如果你在尝试聚焦时遇到这个问题确保目标实际可见。以我自己为例，我就是这样做的:

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

这并没有起作用。当我从做了工作的控制台执行$('#elementid').focus() '时，我才意识到发生了什么。区别-在目标上面的代码中，不确定目标将实际上可见，因为动画可能不是完整的。线索就在这里:

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


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

正如预期的那样。我最初也在一个setTimeout解决方案，它也工作。然而，任意选择的超时迟早会破坏解决方案，这取决于主机设备确保目标元素可见的过程有多慢。

有同样的问题，focus()似乎不工作，但最终证明所需要的是滚动到正确的位置:

• https://stackoverflow.com/a/43342974/1335717 < a href = " https://stackoverflow.com/a/43342974/1335717 " > < / >

如果你使用bootstrap + modal，这对我来说是有效的:

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

我也有这个问题。在我的案例中起作用的解决方案是在HTML元素上使用tabindex属性。

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

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

That +1 is index从0开始。 在调用.focus()函数

我希望这能有所帮助。

以防其他人遇到这个问题，遇到和我一样的情况——我试图在点击另一个元素后设置焦点，但焦点似乎不起作用。原来我只需要一个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();
});

这帮助:

如果你从鼠标下拉事件处理程序调用HTMLElement.focus()，你必须调用event. preventdefault()来保持焦点不离开HTMLElement。 来源:https://developer.mozilla.org/en/docs/Web/API/HTMLElement/focus < / p >

对于那些因为使用“$(element).show()”而无法工作的问题。我用下面的方法解决了这个问题:

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

所以你不需要定时器，它会在show方法完成后执行。

在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);
}

对于我的情况，我必须指定一个制表符索引(-1如果只能通过脚本聚焦)

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

刚才又遇到了这个问题，信不信由你，我所要做的就是关闭开发人员工具。显然，Console选项卡的优先级高于页面内容。

箴小费。如果您想从开发控制台打开焦点，那么只需从选项选项卡打开控制台作为一个单独的窗口。最新的Firefox和Chrome浏览器都支持该功能。

我从Chrome的DevTool控制台测试了代码，焦点部分不工作。我后来发现，只有当我从DevTool运行它时，这个问题才会出现，如果我把代码实现到网站上，它就会工作得很好。 实际上，元素被聚焦了，但DevTool立即删除了它

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

在此之后，我尝试了所有这些方法，除了:

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

我不得不改变(由于ajax):

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

最后我只使用$("#q")，即使它是一个输入:

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

你可以试试这个id是tries

window.location.hash = '#tries';

然而，在我的情况下，焦点事件没有触发，因为元素是不可见/隐藏的，结果是元素在几毫秒后可见，因为我在element.on("focus")函数中触发了焦点事件(这是在点击元素时触发的，元素被聚焦)。

这招对我很管用:

element.on("focus", (e) => {
e.preventDefault();
if (element.is(":visible")) {
search_input.trigger("focus");
}
});

在focus()之前设置tabindex=0对我有帮助

const $elOk = $modal.querySelector('.modal__button-ok');
$elOk.setAttribute('tabindex', '0');
$elOk.focus();

使用.keypress()对我来说是一个问题。

如果你也是，试着使用.keyup()或.input()。

.keydown()有奇怪的行为。它将输入移动到新的焦点字段。