小编典典

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

all

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

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


阅读 84

收藏
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