:focus
- $(':focus') 1.6追加
- デモ
$(':focus') 1.6追加
フォーカスが当たっている要素を選択します。
擬似セレクタ「:」を使用する場合は、その前にタグ名や他のセレクタを付けることを推奨します。
それが出来なければ、("*")が指定されたことになります。
そのため、$(':focus') は $('*:focus')と等価になります。
$(document.activeElement)を使用すると、現在フォーカスされている要素を
全体のDOMツリーを検索することなく、取得することが出来ます。
デモ
要素がフォーカス状態であるかどうかを判定して、focusedクラスの切り替えを行います。
<!DOCTYPE html>
<html>
<head>
<style>
.focused {
background: #abcdef;
}
</style>
<script src="http://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">
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>
© 2010 - 2017 STUDIO KINGDOM