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

一尘不染

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

javascript

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

我当时以为我们可以使用某种条件阻止这种行为。例如，如果我们在鼠标移出时测试了任何输入是否具有焦点，则可以阻止边框消失。AFAIK，:focusjQuery中没有选择器，所以我不确定如何实现。有任何想法吗？

阅读 237

2020-04-25

共1个答案

一尘不染

jQuery 1.6以上

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

jQuery 1.5及以下

编辑： 随着时代的变化，我们发现更好的方法来测试焦点，新的最爱是BenAlman的要点：

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

请注意，(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 );

2020-04-25