2015年4月更新

Question

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

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

Answer 1

jQuery 1.6 +

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

即可

jQuery 1.5及以下

修改：随着时间的推移，我们会找到更好的方法来测试焦点，新的收藏是this gist from Ben Alman：

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

引自Mathias Bynens here：

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

您正在定义一个新的选择器。见Plugins/Authoring。然后你可以这样做：

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等误报。这样，我们确保过滤掉除表单控件和超链接之外的所有元素。

（摘自this gist Ben Alman。）

Answer 4

2015年4月更新

由于这个问题已经存在了一段时间，并且一些新的约定已经发挥作用，我觉得我应该提到.live方法已被折旧。

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

他们的documentation在解释它如何运作方面非常有用;

.on（）方法将事件处理程序附加到当前选定的集合 jQuery对象中的元素。从jQuery 1.7开始，使用.on（）方法提供附加事件处理程序所需的所有功能。对于帮助转换旧的jQuery事件方法，请参阅.bind（）， .delegate（）和.live（）。

因此，为了让您能够定位“重点关注”的输入。 event，您可以在脚本中使用它。类似的东西：

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

这非常强大，甚至允许您使用TAB键。

Answer 5

我不完全确定你所追求的是什么，但这听起来可以通过将输入元素（或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;
        });
});

Answer 6

您是否考虑过使用 mouseOver 和 mouseOut 进行模拟。另请查看 mouseEnter 和 mouseLeave

Answer 7

使用类来标记元素状态的替代方法是内部data store functionality。

P.S。：您可以使用data()功能存储布尔值和任何您想要的内容。这不仅仅是关于字符串：）

$("...").mouseover(function ()
{
    // store state on element
}).mouseout(function ()
{
    // remove stored state on element
});

然后只是访问元素状态的问题。

Answer 8

如果有人关心，现在有更好的方法来捕捉焦点，$(foo).focus(...)

http://api.jquery.com/focus/

Answer 9

跟踪两个状态（悬停，聚焦）为真/假标志，每当更改时，运行一个删除边框的函数，如果两者都为假，否则显示边框。

所以：onfocus设置focus = true，onblur设置focus = false。 onmouseover sets hovered = true，onmouseout sets hovered = false。在每个事件之后运行一个添加/删除边框的函数。

Answer 10

据我所知，您无法询问浏览器屏幕上的任何输入是否有焦点，您必须设置某种焦点跟踪。

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

我有一个很容易处理这个问题的MooTools类，我相信你可以创建一个jquery插件来做同样的事情。

创建完成后，您可以在进行任何边框交换之前检查noFocus。

Answer 11

没有：焦点，但有：选择 http://docs.jquery.com/Selectors/selected

但是如果你想根据选择的内容改变事物的外观，你可能应该使用模糊事件。

http://docs.jquery.com/Events/blur

Answer 12

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

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

因此，如果它没有该类（读取：div中没有元素具有焦点），则删除边框。否则，没有任何反应。

Answer 13

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

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

Answer 14

我有一个.live（“焦点”）事件设置为选择（）（突出显示）文本输入的内容，以便用户在键入新值之前不必选择它。

$（formObj）。选择（）;

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

我以为我可以通过稍微延迟选择...

来解决这个问题

的setTimeout（函数（）{$（formObj）。选择（）;}，200）;

这很好用，选择会持续，但是出现了一个有趣的问题。如果你从一个字段标注到下一个字段，焦点将在选择发生之前切换到下一个字段。由于选择抢断焦点，焦点将返回并触发新的“焦点”事件。这最终导致了一连串的输入选择在屏幕上跳舞。

一个可行的解决方案是在执行select（）之前检查该字段是否仍然具有焦点，但如上所述，没有简单的方法可以检查......我最终只是放弃了整个自动高亮，而不是转动什么应该是一个单独的jQuery select（）调用一个充满子程序的巨大函数...

Answer 15

简单

 <input type="text" /> 



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

    alert("I am in Focus");

     });
 </script>

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

15 个答案:

jQuery 1.6 +

jQuery 1.5及以下

任何jQuery

2015年4月更新