JavaScriptでフォーカスを確認する際に便利な`hasFocus()`メソッドについて、基本的な使い方から実践的な例まで詳しく解説します。

hasFocus()メソッドとは

`hasFocus()`は、HTML要素が現在フォーカスを持っているかどうかを確認できるJavaScriptのメソッドです。このメソッドは真偽値（true/false）を返します。

基本的な使い方

// 基本的な構文
document.hasFocus()

使用例：

// フォーカスの状態を確認
if (document.hasFocus()) {
    console.log('ドキュメントにフォーカスがあります');
} else {
    console.log('ドキュメントにフォーカスがありません');
}

実践的な使用例

1. フォームの入力監視

const inputField = document.querySelector('input');

setInterval(() => {
    if (document.hasFocus() && document.activeElement === inputField) {
        console.log('入力フィールドにフォーカスがあります');
    }
}, 1000);

2. 自動保存機能の実装

const textArea = document.querySelector('textarea');

textArea.addEventListener('blur', () => {
    if (!document.hasFocus()) {
        // フォーカスが外れた時に自動保存
        saveContent(textArea.value);
    }
});

function saveContent(content) {
    // 保存処理
    console.log('コンテンツを保存しました:', content);
}

3. ユーザーの活動状態の監視

let userActive = true;

setInterval(() => {
    if (!document.hasFocus()) {
        userActive = false;
        console.log('ユーザーは非アクティブです');
    } else {
        userActive = true;
        console.log('ユーザーはアクティブです');
    }
}, 2000);

注意点

  • `hasFocus()`はドキュメント全体のフォーカス状態を確認します
  • ブラウザのタブやウィンドウの切り替えでも`false`を返します
  • 特定の要素のフォーカス状態を確認する場合は`document.activeElement`と組み合わせて使用することをお勧めします

まとめ

`hasFocus()`メソッドは、ユーザーのインタラクションを監視する際に非常に便利なツールです。フォーム入力の管理やユーザーの活動状態の追跡など、様々な用途に活用できます。適切に使用することで、よりインタラクティブなWebアプリケーションの開発が可能になります。