logo标签列表

如何使用jQuery选择具有焦点的元素

jqueryfocuscss-selectors
64

如何选择当前具有焦点的元素？

在jQuery中没有:focus过滤器，因此我们可以使用以下方法：

$('input:focus').someFunction();
2
你实际上想要做什么，这样我才能知道是否有更好的方法。 - TStamper
3
使用jQuery来测试一个输入框是否获得了焦点。你可以使用jQuery的 :focus 选择器来判断一个元素是否处于焦点状态。例如，如果你有一个输入框的id为 myInput，你可以使用以下代码来判断该输入框是否获得了焦点：if ($('#myInput').is(':focus')) { // 输入框已经获得了焦点 } else { // 输入框没有获得焦点 }另外，你也可以使用 document.activeElement 来获取当前处于焦点状态的元素，然后判断该元素是否是你想要的输入框。例如：if (document.activeElement.id === 'myInput') { // 输入框已经获得了焦点 } else { // 输入框没有获得焦点 } - gnarf
请注意，您可以使用 $(':focus') 在当前文档中查找当前聚焦的元素。 - Alexis Wilke
8个回答
153
33
应该选择此答案。它不需要 DOM 遍历，比这里提供的任何其他解决方案都要快。 - Jimmery
3
这是正确答案。jQuery文档甚至建议，在只想选择当前选定元素时，不要使用:focus伪选择器。 - Josh
2
是的，即使是 jQuery 文档也推荐使用这种方法而不是伪查询。 - IAmNaN
这在Chrome中似乎不起作用。当我在Opera中使用它单击一个元素时，我可以正确地获取id。但是在Chrome中，我得到的是空白。上面的另一个解决方案虽然也能达到同样的效果，但这仍然是最好的解决方案。 - Metropolis
遗憾的是，这在Chrome中不起作用，它总是返回body。 - Douglas Gaskell
123
alert($("*:focus").attr("id"));

我使用jQuery。

它将会弹出正在聚焦的元素的id。

希望这对您有用。

4
据我所了解，自提问者询问此问题后，jQuery 已经添加了对 :focus 过滤器的支持，因此这个答案现在是有效的。 - keithjgrant
14
性能较差，尽可能使用document.activeElement。 - sir_thursday
9
耶稣- 你真的在使用 * 作为选择器吗？你知道 * 会选择所有元素吗？每个表格中的每个单元格。93个赞？ - Toskan
6
Sam Shiles的答案建议使用$(document.activeElement)来解决问题。这正是jQuery文档页面上关于:focus伪选择器的描述："如果您正在寻找当前聚焦的元素，$( document.activeElement )可以在无需搜索整个DOM树的情况下检索到它。" - Josh
@kingjeffrey，如果你不知道它有多糟糕，那么它就是完美的！ - gdoron
32

最好的方法是为onFocus事件设置一个处理程序，然后将一个变量设置为具有焦点的元素的ID。

就像这样：

var id;

$(":input").focus(function () {
     id = this.id;
});
1
为什么要使用$(this).attr('id')而不是this.id？ - redsquare
3
要小心，因为窗口也可能会获得焦点，这意味着此代码在所有情况下都不能按预期工作。 - cbp
9
窗口是一个输入吗？这段代码只选择输入元素，所以窗口不会触发回调。 - Morteza Milani
4
萨姆·沙尔斯的回答似乎是迄今为止最好的。 - Toskan
对我没用，使用下面Sams或Marcus的答案。 - Olof_t
也许在当时这个答案还可以，但现在不行了。 - TurboHz
5
如果您使用JQuery，可以编写一个选择器类似于这样：selector like this：
$.expr[':'].focus = function(a){ return (a == document.activeElement); }

您可以选择当前聚焦的元素：$(":focus") 不仅表单控件可以获得焦点，在现代浏览器中，带有tabindex的任何HTML元素都可以获得焦点。
这个的性能如何？另外，$（".：focus"）似乎已经被jQuery 1.7.3实现了。对我来说，它至少可以正常工作，没有你的实现。 - Hengjie
5
你试过了吗？
$.extend($.expr[':'], {
    focused: function(elem) { return elem.hasFocus; }
});

alert($('input :focused').length);
1
document.hasFocus() 确实存在，但这样的方法或属性不适用于元素。在 Firefox 和 Chromium 中尝试过。 - akaihola
4
从当前jQuery版本（1.7）文档的示例中摘录如下：
$(elem).is(":focus");
1

用于检查元素是否具有焦点。

if ($("...").is(":focus")) {
  ...
}
0
这是它的CoffeeScript版本。基于jmanrubia的代码： $.expr[':'].focus = (a) -> a is document.activeElement
你也可以这样调用它$(".:focus")
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接