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

javascript jquery jquery-events jquery-on

2022-08-29 22:42:57

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

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

答案 1

j查询 1.6+

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

jQuery 1.5 及更低版本

编辑：随着时代的变化，我们找到了更好的方法来测试焦点，新的最爱是Ben Alman的这个要点：

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

引用自Mathias Bynens：

请注意，添加测试是为了过滤掉像 body 这样的误报。这样，我们确保过滤掉除表单控件和超链接之外的所有元素。(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 );

答案 2

CSS：

.focus {
    border-color:red;
}

JQuery：

  $(document).ready(function() {

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