使用 jQuery 测试输入是否有焦点

小编典典

使用 jQuery 测试输入是否有焦点

all

在我正在构建的一个站点的首页上，当鼠标悬停在几个站点上时，<div>它们使用 CSS:hover伪类添加边框。其中一个<div>s
包含一个<form>，如果其中的输入具有焦点，则使用 jQuery 将保留边框。除了 IE6 不支持:hover除 s
之外的任何元素外，这非常有效<a>。所以，对于这个浏览器，我们只使用 jQuery 来模仿
CSS:hover使用的$(#element).hover()方法。唯一的问题是，现在 jQuery 处理表单focus() 和
hover()，当输入具有焦点然后用户将鼠标移入和移出时，边框消失了。

我在想我们可以使用某种条件来阻止这种行为。例如，如果我们在鼠标移出时测试任何输入是否有焦点，我们可以阻止边框消失。AFAIK，jQuery
中没有:focus选择器，所以我不知道如何做到这一点。有任何想法吗？

阅读 83

2022-03-07

共1个答案

小编典典

jQuery 1.6+

jQuery 添加了一个:focus选择器，因此我们不再需要自己添加它。只需使用$("..").is(":focus")

jQuery 1.5 及以下

编辑： 随着时代的变化，我们找到了更好的测试焦点的方法，最喜欢的是Ben Alman
的这个要点：

jQuery.expr[':'].focus = function( elem ) {
  return elem === document.activeElement && ( elem.type || elem.href );
};

在这里引用 Mathias Bynens的话：

请注意，(elem.type || elem.href)添加测试是为了过滤掉像身体这样的误报。这样，我们确保过滤掉除表单控件和超链接之外的所有元素。

您正在定义一个新的选择器。请参阅插件/创作。然后你可以这样做：

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

要么：

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

任何 jQuery

如果您只想弄清楚哪个元素具有焦点，您可以使用

$(document.activeElement)

如果您不确定版本是否为 1.6 或更低，可以在:focus缺少选择器时添加：

(function ( $ ) {
    var filters = $.expr[":"];
    if ( !filters.focus ) { 
        filters.focus = function( elem ) {
           return elem === document.activeElement && ( elem.type || elem.href );
        };
    }
})( jQuery );

2022-03-07