JavaScriptでテキストエリアがフォーカスされているかをチェックする方法


  1. イベントハンドラを使用する方法: テキストエリアにフォーカスが当てられたときに特定のイベントがトリガーされるため、これらのイベントを利用してフォーカスの状態を確認できます。

    const textarea = document.getElementById('myTextarea');
    textarea.addEventListener('focus', function() {
     console.log('テキストエリアがフォーカスされました');
    });
    textarea.addEventListener('blur', function() {
     console.log('テキストエリアのフォーカスが外れました');
    });

    上記の例では、テキストエリアがフォーカスされたときには"focus"イベントが発生し、フォーカスが外れたときには"blur"イベントが発生します。必要に応じて、これらのイベントハンドラ内で他の処理を行うことができます。

  2. document.activeElementを使用する方法: document.activeElementプロパティを使用すると、現在フォーカスされている要素を取得できます。これを使用して、テキストエリアがフォーカスされているかどうかを確認できます。

    const isTextareaFocused = () => {
     return document.activeElement === document.getElementById('myTextarea');
    };
    console.log(isTextareaFocused()); // テキストエリアがフォーカスされている場合はtrue、されていない場合はfalseを返す

    上記の例では、isTextareaFocused関数を使用してテキストエリアがフォーカスされているかどうかを確認しています。テキストエリアの要素を取得し、それが現在のアクティブな要素と一致するかどうかをチェックしています。

これらの方法を使用することで、JavaScriptでテキストエリアのフォーカス状態を確認できます。必要に応じて、これらのコード例をカスタマイズして使用してください。