jQueryfocus()文档状态的最后一个示例
$('#id').focus()
应该使输入集中（活动）。我似乎无法让这个工作。
即使在本网站的控制台中，我也在尝试搜索框
$('input[name="q"]').focus()
我什么也没得到。有任何想法吗？
问问题
220610 次
18 回答
456
实际上，只要您不专注于控制台，您为关注此站点提供的示例就可以正常工作。不起作用的原因仅仅是因为它没有从开发控制台中窃取焦点。如果您在控制台中运行以下代码，然后在浏览器窗口中快速单击，您将看到它聚焦在搜索框：
setTimeout(function() { $('input[name="q"]').focus() }, 3000);
至于你的另一个，过去给我带来麻烦的一件事是事件的顺序。您不能在尚未附加到 DOM 的元素上调用 focus()。您尝试关注的元素是否已附加到 DOM？
于 2013-04-07T05:20:44.620 回答
68
在网上其他地方找到了解决方案...
$('#id').focus();
不工作。
$('#id').get(0).focus();
确实有效。
于 2015-12-21T17:26:40.947 回答
25
这里的一些答案建议使用setTimeout来延迟关注目标元素的过程。其中一个提到目标位于模态对话框内。setTimeout在不知道使用位置的具体细节的情况下，我无法进一步评论解决方案的正确性。
事情的简单事实是，您不能专注于尚不可见的元素。如果遇到此问题，请确保在尝试聚焦时目标实际上是可见的。在我自己的情况下，我正在按照以下方式做一些事情：
$('#elementid').animate({left:0,duration:'slow'});
$('#elementid').focus();
这没有用。当我从确实有效的控制台执行 $('#elementid').focus()` 时，我才意识到发生了什么。不同之处 - 在我的目标上方的代码中，由于动画可能不完整，因此无法确定目标实际上是否可见。这就是线索：
$('#elementid').animate({left:0,duration:'slow',complete:focusFunction});
function focusFunction(){$('#elementid').focus();}
按预期工作。我最初也提出了一个setTimeout解决方案，它也有效。但是，任意选择的超时时间迟早会破坏解决方案，具体取决于主机设备执行确保目标元素可见的过程的速度。
于 2017-03-23T08:28:05.500 回答
23
如果您使用 bootstrap + modal，这对我有用：
$(myModal).modal('toggle');
$(myModal).on('shown.bs.modal', function() {
$('#modalSearchBox').focus()
});
于 2017-06-08T02:20:36.293 回答
12
以防万一其他人偶然发现这个问题并遇到与我相同的情况 - 我试图在单击另一个元素后设置焦点，但焦点似乎不起作用。事实证明我只需要一个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
于 2017-08-27T12:47:27.767 回答
5
我也有这个问题。在我的案例中有效的解决方案是在 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 中
我希望这有帮助。
于 2017-06-25T13:45:04.800 回答
4
我意识到这是旧的，但今天遇到了。没有一个答案对我有用，我发现有效的是 setTimeout。我希望我的重点放在模式的输入字段上，使用 setTimeout 工作。希望这可以帮助！
于 2016-10-23T11:33:03.977 回答
3
在 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);
}
于 2018-11-07T19:56:41.247 回答
2
对于那些因为使用“$(element).show()”而无法工作的人。我用下一个方法解决了它：
var textbox = $("#otherOption");
textbox.show("fast", function () {
textbox[0].focus();
});
所以你不需要计时器，它会在 show 方法完成后执行。
于 2018-02-07T23:55:36.987 回答
2
刚才又遇到了这个问题，不管你信不信，我所要做的就是关闭开发者工具。显然，控制台选项卡的焦点优先于页面内容。
于 2020-04-09T11:52:49.543 回答
1
就我而言，如果其他人遇到这种情况，我会加载一个表单以供查看，用户单击“编辑”，ajax 获取并返回值并更新表单。
就在这之后，我尝试了所有这些，但除了：
setTimeout(function() { $('input[name="q"]').focus() }, 3000);
我不得不更改为（由于ajax）：
setTimeout(function() { $('input[name="q"]').focus() }, **500**);
我终于只使用了 $("#q") 即使它是一个输入：
setTimeout(function () { $("#q").focus() }, 500);
于 2021-01-29T15:15:14.627 回答
1
我遇到了类似的问题，将事件包装在setTimout函数中对我来说非常有效。但不知何故，感觉这不是解决它的最佳方法（手动延迟事件）。
但是，在我的情况下，焦点事件没有触发，因为元素是不可见/隐藏的，事实证明元素在几毫秒后可见，因为我在element.on("focus")函数内触发了焦点事件（这是在元素是单击并且元素集中在）。
这对我有用：
element.on("focus", (e) => {
e.preventDefault();
if (element.is(":visible")) {
search_input.trigger("focus");
}
});
于 2021-04-01T07:26:05.430 回答
0
确保元素及其父元素可见。您不能对隐藏元素使用焦点
于 2020-05-14T20:09:20.563 回答
0
专家提示。如果您想从开发控制台打开焦点，只需将控制台作为选项选项卡的单独窗口打开即可。最新的 Firefox 和 Chrome 支持此功能。
于 2020-11-19T07:41:11.257 回答
0
我从 Chrome 的 DevTool 控制台测试了代码，但焦点部分不起作用。我后来发现只有当我从 DevTool 运行它并且我将代码实现到网站时才会出现这个问题，它工作正常。实际上，该元素获得了焦点，但 DevTool 立即将其删除。
于 2021-01-21T07:15:53.187 回答
0
你可以试试这个id是tries
window.location.hash = '#tries';
于 2021-02-03T07:43:19.467 回答
-1
对于我的情况，我必须指定一个标签索引（-1如果只能通过脚本聚焦）
<div tabindex='-1'>
<!-- ... -->
</div>
于 2020-02-04T15:29:10.303 回答
-2
附加解决方案有同样的问题，焦点（）似乎没有工作，但最终结果证明需要滚动到正确的位置：
于 2017-04-11T10:12:54.890 回答