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

Question

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

我以为我们可以使用某种条件来阻止这种行为.例如,如果我们测试鼠标输出是否有任何输入有焦点,我们可以阻止边界消失.AFAIK,:focusjQuery中没有选择器,所以我不确定如何实现这一点.有任何想法吗？

Answer 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 );
};

从马蒂亚斯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 );

Answer 2

CSS:

.focus {
    border-color:red;
}

JQuery的:

  $(document).ready(function() {

    $('input').blur(function() {
        $('input').removeClass("focus");
      })
      .focus(function() {
        $(this).addClass("focus")
      });
  });

Answer 3

这是一个比目前接受的答案更强大的答案:

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

请注意,(elem.type || elem.href)添加测试以过滤掉误报body.这样,我们确保过滤掉除表单控件和超链接之外的所有元素.

(来自这个要点的本Alman).

Answer 4

2015年4月更新

由于这个问题已经存在了一段时间,而且一些新的惯例已经发挥作用,我觉得我应该提一下该.live方法已被折旧.

取而代之的是,.on现在已经引入了该方法.

他们的文档在解释它是如何工作时非常有用;

.on()方法将事件处理程序附加到jQuery对象中当前选定的元素集.从jQuery 1.7开始,.on()方法提供了附加事件处理程序所需的所有功能.有关从旧的jQuery事件方法转换的帮助,请参阅.bind(),. delegate()和.live().

因此,为了使您能够定位"输入聚焦"事件,您可以在脚本中使用它.就像是:

$('input').on("focus", function(){
   //do some stuff
});

这非常强大,甚至允许您使用TAB键.