:focus

$(':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>

 Back to top

© 2010 - 2017 STUDIO KINGDOM