javascript - 使用jQuery检测如果输入具有焦点?

  显示原文与译文双语对照的内容

在我正在构建的站点的首页,几个 <div> 使用 CSS: hover属性在鼠标上方添加边框。 <div>的其中一个包含了一个 <form>,如果输入中有焦点,它将保留边框。 除了IE6不支持之外,它工作得很完美:在 <a> 之外的任何元素上悬停。 因此,对于这个浏览器,我们只使用jQuery来模拟 css: 使用 $(#element).hover() 方法悬停。 惟一的问题是,当输入有焦点时,jQuery同时处理表单 focus() 和 hover(),,用户将鼠标移动出去,边框消失。

我想我们可以使用某种条件来停止这种行为。 例如如果我们在鼠标上测试,如果有任何输入有焦点,我们可以停止边框离开。 实际上,在jQuery中没有焦点选择器,所以我不确定如何实现。 有什么想法吗?

非常感谢您的帮助.

时间:

jQuery 1.6 +

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

jQuery 1.5和更高版本

编辑:时代变了,我们找到更好的方法来测试重点,新最喜欢要点从本 Alman :


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

引用来自 Mathias Bynens 的引用:

注意,(elem.type || elem.href) 测试被添加到过滤掉像body这样的假阳性。 这样,我们确保过滤除表单控件和超链接之外的所有元素。

你正在定义一个新的选择器。 请参见插件/创作 web 。然后,你可以:


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

css:


.focus {
 border-color:red;
}

jQuery:


 $(document).ready(function() {

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

下面是一个比目前接受的更健壮的答案:


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

注意,(elem.type || elem.href) 测试被添加到筛选出像 body 这样的假阳性。 这样,我们确保过滤除表单控件和超链接之外的所有元素。

(取自这个主旨本 Alman )。

我不完全确定你在后面的是什么,但这似乎是通过将输入元素( 或者 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;
 });
});

使用类标记元素状态的另一种方法是内部数据存储功能

你可以使用 data() 函数存储布尔值和任何你想要的东西。 它不仅仅是字符串:)


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

这就是访问元素状态的问题。

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


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

...