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

在我正在构建的站点的首页上，有几个

使用CSS

：hover

伪类在鼠标悬停在它们上面时添加边框。其中一个

包含一个

，如果其中的输入具有焦点，则使用jQuery将保留边框。除了IE6不支持

：将
悬停在
以外的任何元素上之外，这项功能都可以正常工作。因此，仅对于这个浏览器，我们使用jQuery模拟CSS
：hover
，使用
$（#元素）.hover（）方法。唯一的问题是，既然jQuery同时处理表单
focus（）
和
hover（）
，当输入具有焦点时，用户将鼠标移入移出，边框就会消失

我在想我们可以用某种条件来阻止这种行为。例如，如果我们在mouse out上测试任何输入是否有焦点，我们就可以阻止边界消失。好了，jQuery中没有
：focus
选择器，所以我不确定如何实现这一点。有什么想法吗？
你有没有想过用mouseOver和mouseOut来模拟这个。同时查看mouseEnter和mouseLeave，将这两种状态（悬停、聚焦）作为真/假标志进行跟踪，每当其中一种状态发生变化时，运行一个函数，如果两者都为假，则删除边框，否则显示边框

所以：onfocus set focused=true，onblur set focused=false。onmouseover设置悬停=真，onmouseout设置悬停=假。在这些事件中的每一个都运行一个添加/删除边框的功能。
据我所知，您不能询问浏览器屏幕上的任何输入是否有焦点，您必须设置某种焦点跟踪

我通常有一个名为“noFocus”的变量，并将其设置为true。然后我在所有输入中添加一个焦点事件，使noFocus为false。然后，我向所有将noFocus设置回true的输入添加一个模糊事件

我有一个MooTools类可以很容易地处理这个问题，我相信您可以创建一个jquery插件来完成同样的工作

创建后，您可以在执行任何边界交换之前检查noFocus。
我不完全确定您的目标，但这听起来好像可以通过将输入元素（或div？）的状态存储为变量来实现：

$('div').each(function(){

    var childInputHasFocus = false;

    $(this).hover(function(){
        if (childInputHasFocus) {
            // do something
        } else { }
    }, function() {
        if (childInputHasFocus) {
            // do something
        } else { }
    });

    $('input', this)
        .focus(function(){
            childInputHasFocus = true;
        })
        .blur(function(){
            childInputHasFocus = false;
        });
});

没有：焦点，但有：选定

但是，如果您想根据所选内容更改事物的外观，您可能应该使用模糊事件

我最后要做的是创建一个名为.elementhasfocus的任意类，该类在jQuery focus（）函数中添加和删除。当鼠标悬停（）函数运行时，它会检查.elementhasfocus：

if(!$("#quotebox").is(".boxhasfocus")) $(this).removeClass("box_border");

因此，如果它没有该类（读取：div中没有具有焦点的元素），那么边框将被删除。否则，什么也不会发生。
CSS:

.focus {
    border-color:red;
}

JQuery：

  $(document).ready(function() {

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

使用类来标记元素状态的另一种方法是内部

注意：您可以使用
data（）
函数存储布尔值和您想要的任何内容。这不仅仅是关于字符串：）

然后只需访问元素的状态。
有一个插件可以检查元素是否聚焦：

jquery1.6+
jQuery添加了一个选择器，因此我们不再需要自己添加它。只需使用
$（“.”）。is（“：focus”）

jQuery 1.5及以下版本
编辑：随着时代的变化，我们找到了更好的测试焦点的方法，最受欢迎的是：

引自Mathias Bynens：

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

您正在定义一个新的选择器。看见然后你可以做：

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

或：

任何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 );

这里有一个比目前公认的答案更可靠的答案：

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

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

（摘自。）
我设置了一个.live（“焦点”）事件来选择（）（突出显示）文本输入的内容，这样用户就不必在键入新值之前选择它

$（formObj.select（）

由于不同浏览器之间的怪癖，select有时会被导致它的点击所取代，并且它会立即取消选择内容，以便将光标放在文本字段中（在FF中工作正常，但在IE中失败）

我想我可以通过稍微推迟选择来解决这个问题

setTimeout（函数（）{$（formObj）.select（）；}，200）

这样做效果很好，select将继续，但出现了一个有趣的问题。。如果从一个字段切换到下一个字段，则在进行选择之前，焦点将切换到下一个字段。由于select窃取焦点，因此焦点将返回并触发新的“焦点”事件。这最终导致一系列输入选择在屏幕上舞动

一个可行的解决方案是在执行select（）之前检查字段是否仍然有焦点，但是如上所述，没有简单的方法来检查。。。我最终放弃了整个自动高亮显示，而不是将一个jQuery select（）调用变成一个包含子例程的巨大函数…
简单

 <input type="text" /> 



 <script>
     $("input").focusin(function() {

    alert("I am in Focus");

     });
 </script>


$（“输入”）.focusin（函数（）{
警惕（“我处于焦点”）；
});
如果有人关心，现在有更好的方法来捕捉焦点，
$（foo）.focus（…）

2015年4月更新
由于这个问题已经存在了一段时间，并且一些新的约定已经开始发挥作用，我觉得我应该提到
。live
方法已经过时
$(document.activeElement)

(function ( $ ) {
    var filters = $.expr[":"];
    if ( !filters.focus ) { 
        filters.focus = function( elem ) {
           return elem === document.activeElement && ( elem.type || elem.href );
        };
    }
})( jQuery );

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

 <input type="text" /> 



 <script>
     $("input").focusin(function() {

    alert("I am in Focus");

     });
 </script>

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