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

On the front page of a site I am building, several <div>s use the CSS :hover pseudo-class to add a border when the mouse is over them. One of the <div>s contains a <form> which, using jQuery, will keep the border if an input within it has focus. This works perfectly except that IE6 does not support :hover on any elements other than <a>s. So, for this browser only we are using jQuery to mimic CSS :hover using the $(#element).hover() method. The only problem is, now that jQuery handles both the form focus() and hover(), when an input has focus then the user moves the mouse in and out, the border goes away.

我在想我们可以用一些条件来阻止这种行为。例如，如果我们在鼠标移出时测试任何输入是否有焦点，我们可以阻止边界消失。AFAIK，在jQuery中没有:focus选择器，所以我不确定如何做到这一点。什么好主意吗?

当前回答

jQuery 1.6 +

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

jQuery 1.5及以下版本

编辑:随着时代的变化，我们找到了更好的方法来测试注意力，最受欢迎的是本·阿尔曼的要点:

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

引用Mathias Bynens的话:

注意(elem。类型|| elem.href)测试添加过滤假阳性如身体。这样，我们可以确保过滤掉除了表单控件和超链接之外的所有元素。

您正在定义一个新的选择器。看到插件/创作。然后你可以这样做:

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

or:

$("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 );

2010-04-21 16:04:18

其他回答

有一个插件可以检查一个元素是否被聚焦:http://plugins.jquery.com/project/focused

$('input').each(function(){
   if ($(this) == $.focused()) {
      $(this).addClass('focused');
   }
})

2009-11-12 09:05:16

您是否考虑过使用mouseOver和mouseOut来模拟这种情况。还可以查看mouseEnter和mouseLeave

2009-06-08 21:29:06

jQuery 1.6 +

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

jQuery 1.5及以下版本

编辑:随着时代的变化，我们找到了更好的方法来测试注意力，最受欢迎的是本·阿尔曼的要点:

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

引用Mathias Bynens的话:

注意(elem。类型|| elem.href)测试添加过滤假阳性如身体。这样，我们可以确保过滤掉除了表单控件和超链接之外的所有元素。

您正在定义一个新的选择器。看到插件/创作。然后你可以这样做:

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

or:

$("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 );

2010-04-21 16:04:18

CSS:

.focus {
    border-color:red;
}

JQuery:

  $(document).ready(function() {

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

2009-06-08 21:41:38

这里有一个比目前公认的更有力的答案:

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

注意(elem。类型|| elem.href)测试添加过滤假阳性如身体。这样，我们可以确保过滤掉除了表单控件和超链接之外的所有元素。

(摘自本·阿尔曼的主旨。)

2011-03-22 12:58:29

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

推荐文章

最新文章

标签