:focus Selector


focus selector

描述: 选择当前获取焦点的元素。

  • 添加的版本: 1.6jQuery( ":focus" )

如同其他伪类选择器(那些以":"开始)一样,使用:focus时,建议在他们前面加一个标签名称或其他选择;否则,会使用默认的通用选择器("*"),性能是不言而喻的。换句话说,$(':focus')等同为$('*:focus')。如果你正在寻找当前的焦点元素,$( document.activeElement )将检索,而不必查找整个DOM树。

例子:

给获取焦点的元素添加focused类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
<head>
<style>
.focused {
background: #abcdef;
}
</style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="content">
<input tabIndex="1">
<input tabIndex="2">
<select tabIndex="3">
<option>select menu</option>
</select>
<div tabIndex="4">
a div
</div>
</div>
<script>
$( "#content" ).delegate( "*", "focus blur", function( event ) {
var elem = $( this );
setTimeout(function() {
elem.toggleClass( "focused", elem.is( ":focus" ) );
}, 0);
});
</script>
</body>
</html>

Demo: