JavaScriptでフォーカス中の要素を取得する方法【document.activeElementの使い方】

JavaScriptで現在フォーカスしている要素を特定する方法

JavaScriptで現在フォーカスしている要素を特定する方法

Web開発の世界では、ユーザーの操作に応じて動的なフィードバックを提供することが、優れたユーザーエクスペリエンスの鍵となります。その中でも、「ユーザーが今、どの要素に注目しているのか」を把握することは非常に重要です。例えば、キーボードショートカットの実装、アクセシビリティの向上、あるいは特定のUI（ユーザーインターフェース）の制御など、様々な場面でこの情報が必要とされます。

この記事では、JavaScriptを用いて現在フォーカスされている要素（アクティブな要素）を簡単に取得する方法と、その実践的な活用例について詳しく解説します。

`document.activeElement`：現在のフォーカス要素を取得する

JavaScriptには、現在フォーカスを持っているドキュメント内の要素を取得するための便利なプロパティが用意されています。それが document.activeElement です。

このプロパティは、現在フォーカスされている要素への参照を返します。もしドキュメント内にフォーカスされている要素がない場合、多くは <body> 要素または null を返します。

基本的な使い方

使い方は非常にシンプルです。コンソールで document.activeElement を実行するだけで、現在アクティブな要素を確認できます。

サンプルコード:

以下のHTMLで試してみましょう。

<!DOCTYPE html>
<html>
<head>
  <title>document.activeElement のデモ</title>
</head>
<body>

  <input type="text" id="input1" placeholder="入力フィールド1">
  <input type="text" id="input2" placeholder="入力フィールド2">
  <button id="checkButton">フォーカス中の要素をチェック</button>

  <script>
    document.getElementById('checkButton').addEventListener('click', () => {
      const activeElement = document.activeElement;
      if (activeElement) {
        console.log('現在フォーカスしている要素:', activeElement);
        console.log('その要素のID:', activeElement.id);
      } else {
        console.log('フォーカスされている要素はありません。');
      }
    });
  </script>

</body>
</html>

実行手順:

上記のHTMLをファイルに保存し、ブラウザで開きます。
ブラウザの開発者ツールでコンソールを開きます。
「入力フィールド1」または「入力フィールド2」をクリックしてフォーカスします。
「フォーカス中の要素をチェック」ボタンをクリックします。

コンソールには、フォーカスした入力フィールドの要素情報とそのIDが出力されます。何もフォーカスしていない状態でボタンを押すと、<body> 要素がアクティブな要素として表示されることがほとんどです。

実践的なユースケース

document.activeElement は、以下のような実践的なシナリオで非常に役立ちます。

1. キーボードショートカットの実装

特定の入力フォームやモーダルウィンドウが開いている時だけ、特別なキーボードショートカット（例：「Esc」で閉じる、「Enter」で送信）を有効にしたい場合があります。

document.addEventListener('keydown', (event) => {
  // モーダルウィンドウの要素を取得
  const modal = document.getElementById('myModal');

  // モーダルウィンドウ内の要素がフォーカスされているかチェック
  if (modal.contains(document.activeElement) && event.key === 'Escape') {
    // モーダルを閉じる処理
    closeModal();
  }
});

このコードは、myModal 要素またはその子孫要素にフォーカスがある場合にのみ、「Esc」キーでモーダルを閉じるようにします。これにより、ページの他の部分で誤ってモーダルが閉じてしまうのを防ぎます。

2. アクセシビリティの向上

スクリーンリーダーなどの支援技術を利用しているユーザーのために、現在どの要素がアクティブであるかを明確に伝えることはアクセシビリティの観点から重要です。focus イベントと blur イベントを document.activeElement と組み合わせることで、フォーカスの変更を追跡し、適切なフィードバックを提供できます。

3. 動的なUIの制御

例えば、テキスト入力フィールドにフォーカスが当たった時だけ、その近くに書式設定のツールバーを表示する、といった動的なUIを実装できます。

const textEditor = document.getElementById('text-editor');
const formattingToolbar = document.getElementById('formatting-toolbar');

document.addEventListener('focusin', (event) => {
  if (textEditor.contains(document.activeElement)) {
    formattingToolbar.style.display = 'block';
  } else {
    formattingToolbar.style.display = 'none';
  }
});

focusin イベントはバブリングするため、ドキュメント全体でフォーカスの変更を効率的に監視できます。

注意点：`<iframe>` を扱う場合

一つ注意すべき点として、document.activeElement は、そのプロパティが属するドキュメント内のアクティブな要素しか返せないという制約があります。つまり、ページに <iframe> が埋め込まれている場合、document.activeElement は <iframe> 自体を返すことはあっても、<iframe> の内部でフォーカスされている要素を直接取得することはできません。

<iframe> 内のアクティブな要素を取得するには、まず <iframe> の contentWindow プロパティにアクセスし、その中の document.activeElement を参照する必要があります。

const iframe = document.getElementById('my-iframe');
const iframeActiveElement = iframe.contentWindow.document.activeElement;

console.log('Iframe内のアクティブな要素:', iframeActiveElement);

まとめ

document.activeElement は、ユーザーの現在の操作対象を正確に把握するためのシンプルかつ強力なツールです。このプロパティを理解し、イベントリスナーなどと組み合わせることで、よりインタラクティブで、ユーザーにとって直感的なWebアプリケーションを構築することができます。ぜひ、あなたの次のプロジェクトで活用してみてください。