初心者でもわかる！jQueryでフォーカスされた要素を取得する方法

2024-04-10

jQueryでフォーカスされた要素を取得するには、いくつかの方法があります。

方法

:focus セレクター

最も簡単な方法は、:focus セレクターを使用することです。このセレクターは、現在フォーカスされている要素にのみマッチします。

// フォーカスされた要素を取得
const focusedElement = $(':focus');

// フォーカスされた要素の背景色を変更
focusedElement.css('background-color', 'yellow');

$(document.activeElement)

$(document.activeElement) を使用すると、現在フォーカスされている要素を取得できます。これは、:focus セレクターよりも高速ですが、IE 8 以前ではサポートされていません。

// フォーカスされた要素を取得
const focusedElement = $(document.activeElement);

// フォーカスされた要素の値を取得
const value = focusedElement.val();

イベントハンドラー

focus イベントハンドラーを使用すると、要素がフォーカスされたときに処理を実行できます。

// 入力要素にフォーカスされたときの処理
$('input').focus(function() {
  // フォーカスされた要素の背景色を変更
  $(this).css('background-color', 'yellow');
});

補足

複数の要素にフォーカスされている場合、:focus セレクターは最初の要素のみ取得します。
フォーカスされている要素を取得する方法は、パフォーマンスやブラウザの互換性によって異なります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>フォーカスされた要素を取得</title>
</head>
<body>
  <input type="text" id="input">

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
  $(document).ready(function() {
    // 入力要素にフォーカスされたときの処理
    $('#input').focus(function() {
      // フォーカスされた要素の背景色を変更
      $(this).css('background-color', 'yellow');
    });
  });
  </script>
</body>
</html>

このコードを実行すると、入力要素にフォーカスが当たると、背景色が黄色になります。

上記のサンプルコードは、focus イベントハンドラーを使用していますが、blur イベントハンドラーを使用して、要素からフォーカスが外れたときの処理を実行することもできます。
:focus セレクターを使用して、フォーカスされている要素を取得することもできます。

jQueryでフォーカスされた要素を取得する他の方法

document.activeElement プロパティは、現在フォーカスされている要素を取得します。これは jQuery を使用せずにフォーカスされた要素を取得する最も簡単な方法です。

// フォーカスされた要素を取得
const focusedElement = document.activeElement;

// フォーカスされた要素の値を取得
const value = focusedElement.value;

event.target

focus イベントの event オブジェクトには、フォーカスされた要素への参照が target プロパティとして含まれています。

// 入力要素にフォーカスされたときの処理
$('input').focus(function(event) {
  // フォーカスされた要素を取得
  const focusedElement = event.target;

  // フォーカスされた要素の値を取得
  const value = focusedElement.value;
});

.closest() メソッドは、現在の要素から指定されたセレクターに一致する最も近い親要素を取得します。

// 入力要素にフォーカスされたときの処理
$('input').focus(function() {
  // フォーカスされた要素の親フォームを取得
  const form = $(this).closest('form');

  // フォーム内のすべての入力要素を無効にする
  form.find('input').prop('disabled', true);
});

// フォーカスされた要素を取得
const focusedElement = $(':focus');

// フォーカスされた要素がテキスト入力要素かどうかを確認
if (focusedElement.filter('input[type="text"]').length) {
  // テキスト入力要素の場合、処理を実行
}

// 入力要素にフォーカスされたときの処理
$('input').focus(function() {
  // フォーカスされた要素がテキスト入力要素かどうかを確認
  if ($(this).is('input[type="text"]')) {
    // テキスト入力要素の場合、処理を実行
  }
});