JavaScript（或jQuery）中是否有“焦点”？答案

【问题标题】：Is there a 'has focus' in JavaScript (or jQuery)?JavaScript（或jQuery）中是否有“焦点”？
【发布时间】：2011-02-10 15:24:52
【问题描述】：

有什么我可以做的事情吗（也许通过插件）

if ( ! $('form#contact input]').hasFocus()) {
  $('form#contact input:first]').focus();
}

基本上，将焦点设置到第一个输入，但前提是用户尚未点击任何内容？

我知道这也可以，但是还有什么更优雅的吗？

$(function() {
  var focused = false;
  $('form#contact input]').focus(function() {
    focused = true;
  }); 
  setTimeout(function() {
    if ( ! focused) {      
      $('form#contact input:first]').focus();
    }
  }, 500);
});

【问题讨论】：

标签： javascript jquery jquery-selectors

【解决方案1】：

不，没有。

但是，您可以像这样模拟它：

$(':input')
    .data('focused', false)
    .focus(function() { $.data(this, 'focused', true); })
    .blur(function() { $.data(this, 'focused', false); });

【讨论】：

所有的答案都是除了文森特的（点击它们）。我正在为他们全部 +1 以反驳这一点。
不知道反对意见。当您的答案只是第一行时，他们可能会这样做。无论如何，我给了你一个 +1 :)
请注意，您现在可以使用$(this).data('focused', true)，等等。

【解决方案2】：

有一个插件http://plugins.jquery.com/project/focused

您也可以查看Using jQuery to test if an input has focus

【讨论】：

有人无缘无故地浏览并（几乎）否决了所有这些答案，所以我 +1 反对

【解决方案3】：

没有本地解决方案，但是有一种更优雅的方式可以做到：

jQuery.extend(jQuery.expr[':'], {
  focus: "a == document.activeElement"
});

您正在定义一个新的选择器。见Plugins/Authoring。然后你可以这样做：

if ($("...").is(":focus")) {
  ...
}

或：

$("input:focus").doStuff();

【讨论】：

也许你应该为较新版本的 jQuery 提交这个，它会很有用。
知道为什么jQuery.expr 使用== 而不是===？
这可能会导致误报。请参阅stackoverflow.com/questions/967096/… 了解更多信息和简单修复（感谢 Ben Alman 和 Diego Perini）。
@MLL：只是eval()'d？我一直以不同的方式写my custom selectors。
正如其他人提到的，jquery 现在原生支持这个：focus api.jquery.com/focus-selector

【解决方案4】：

$('input:focus')

这是 CSS。您不需要创建“自定义选择器”。它已经存在了！ http://www.w3schools.com/CSS/pr_pseudo_focus.asp

只需将您想要执行的任何过程附加到该选择器，如果有问题的元素没有聚焦，它将清除它。我最近这样做是为了防止keyup 在未使用电子邮件输入时实例化电子邮件输入错误检查。

如果您要做的只是检查用户自己是否专注于任何事情，那么就这样做：

if($('input:focus').size() == 0){
    /* Perform your function! */
}

【讨论】：

你错了。 jQuery 与 CSS 不同，没有 :focus 或 :hover 选择器。
jQuery 使用 CSS 选择器。如果它适用于 CSS，它适用于 jQ。相信我。如果您有任何疑问，请尝试此页面中的表格，然后检查 JS：ddrewdesign.com/contact 触发代码在第 124 行。不过我之前没有尝试过:hover，所以我不能说这个。诀窍是让 JS 做一些跑腿工作，以便它能够检查，所以你必须把它放在某种动作中。
正确。 jQ 只识别其浏览器识别的伪类。
有人无缘无故地浏览并（几乎）否决了所有这些答案，所以我 +1 反对
我会说它会因为直接传递给querySelectorAll() 或其表亲之一而起作用。如果您将它与 jQuery 自定义事物一起使用，例如 :input，它可能无法正常工作（尚未测试，取决于 jQuery 如何标记选择器）。

【解决方案5】：

我在使用 jQuery 1.3.2 和 Firefox 3.6.8 的 cletus 方法上遇到了问题，因为字符串 "a == document.activeElement" 不是一个有效的函数。

我修复了它为focus 键定义了一个函数。事实上，jQuery.expr[':'] 中定义的所有其他键都定义为函数。代码如下：

jQuery.extend(jQuery.expr[':'], {
    focus: function(e){ return e == document.activeElement; }
});

所以，现在它按预期工作了。

但是，我在 Firefox 3.6.8 中遇到了一些奇怪的行为（可能是 FF 中的错误？）。如果我在页面呈现时单击输入文本，并且在页面加载时调用 is(":focus")，我会收到来自浏览器的错误，由 FireBug 报告，并且脚本会中断。

为了解决这个问题，我用try...catch 块包围了代码，出错时返回false。如果您想防止您的用户遇到同样的错误，请使用它：

jQuery.extend(jQuery.expr[':'], {
    focus: function(e){
        try{ return e == document.activeElement; }
        catch(err){ return false; }
    }
});

【讨论】：

【解决方案6】：

这里有一个简洁的方法。

$(document.activeElement)

或将其插入您的示例中..

if ($('form#contact input]')[0]!=$(document.activeElement)) { ... }

【讨论】：

底部的永远不会起作用，因为它们总是不同的 jQuery 集合。
稍作改动即可。 jquery 元素是一个数组，其中 javascript 元素位于第一个位置。如果您将其调整为 ($('form#contact input]')[0]!=document.activeElement) { ... } 您的回答对我很有帮助。

【解决方案7】：

jQuery 1.6 现在有一个专用的:focus 选择器。

【讨论】：

【解决方案8】：

我知道这是一个老问题，但我的解决方案可能会对某人有所帮助:)

因为这对我不起作用：

if ($(this)!=$(document.activeElement)) { ... }

..“this”是从 blur 函数返回的。所以我这样做了：

if ($(document.activeElement).attr("class") != "input_textbox"){ ... }

【讨论】：

第一个解决方案无缘无故地将两者包装在 jQuery 集合中，它也会失败，因为它们将是不同的对象。第二种方法很少是检查一个元素是否与您匹配的元素的好方法，因为元素可以有多个类。

【解决方案9】：

    $('*:focus')

（Necro ftw，但仍然有效且有用）

【讨论】：

* 不应该是必需的。
死灵很好 - 问题和答案是永恒的，甚至还有几个徽章可以在很久以后以高分回答问题，例如死灵法师。 但是， 我对此表示反对，因为它没有提供有关如何检查特定元素是否具有焦点的指导。可以添加吗？

【解决方案10】：

考虑到解决方案实际上非常简单，因此很难找到解决方案：

if (document.activeElement == this) {
  // has focus
}

if (document.activeElement != this) {
  // does not have focus
}

【讨论】：

感谢您提供原生 JS 解决方案。