小编典典

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

javascript

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

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


阅读 274

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