使用jQuery来测试输入是否有焦点
在我正在构建的站点的首页上，有几个<div>使用CSS :hover伪类在:hover时添加边框。 其中一个<div>包含一个<form> ，使用jQuery，它将保持边界，如果其中的输入具有焦点。 除了IE6不支持:hover在除<a> s以外的任何元素上之外，此功能完美无缺。 因此，对于这个浏览器，我们只使用jQuery模仿CSS :hover使用$(#element).hover()方法:hover 。 唯一的问题是，现在jQuery同时处理形式focus()和hover() ，当输入有焦点时，用户将鼠标移入和移出，边界消失。
我想我们可以使用某种有条件的方法来阻止这种行为。 例如，如果我们在鼠标上测试了任何输入是否有焦点，我们可以阻止边界消失。 AFAIK，在jQuery中没有:focus选择器，所以我不知道如何做到这一点。 有任何想法吗？
jQuery 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：
请注意，添加了(elem.type || elem.href)测试以过滤出像body这样的误报。 这样，我们确保过滤除表格控件和超链接之外的所有元素。
你正在定义一个新的选择器。 请参阅插件/创作。 那你可以这样做：
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这样的误报。 这样，我们确保过滤除表格控件和超链接之外的所有元素。
（从本阿尔曼的这一要点中获得。）
链接地址: http://www.djcxy.com/p/41391.html