【JavaScript】フォーカスされている要素を取得する

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptでユーザーに現在フォーカスされている要素を取得する方法をご紹介しています。

上記の疑問にお答えします。

では、解説していきます。

document.activeElementで取得する

JavaScriptで現在ユーザーにフォーカスされている要素は、documentのactiveElementで取得することができます。下記のようにプロパティを呼び出すことで、フォーカスされている要素を取得することができます。

document.activeElement

フォーカスされている要素がない場合は、body要素を返します。もしbody要素が存在しない場合は、html要素を返します。

参考：https://developer.mozilla.org/ja/docs/Web/API/Document/activeElement

フォーカスされている要素を取得する

実際にdocument.activeElementでユーザーがフォーカスしている要素を取得してみます。複数のinput要素を設置し、ユーザーにフォーカスされているinput要素のvalueをアラートで表示してみます。

HTML

<ul id="list">
    <li><input type="text" value="1" readonly></li>
    <li><input type="text" value="2" readonly></li>
    <li><input type="text" value="3" readonly></li>
</ul>

JavaScript

const inputs = document.getElementsByTagName('input')

function getActiveElement() {
    alert(document.activeElement.value);
}

Array.from(inputs).forEach(input =>{
    input.addEventListener('mouseup', getActiveElement, false)
})

実行結果

See the Pen 7266 by ryohei (@intotheprogram) on CodePen.

上記サンプルのinput要素をフォーカスすると、input要素の値がアラートに表示されます。フォーカスされている要素が更新されたタイミングで、activeElementが保持している要素も更新されたことがご確認いただけたかと思います。

最後に

現在フォーカスされている要素を取得する場合、要素単位にイベントを設定する方法を採用するケースが多いかと思いますが、ドキュメント単位で確認が必要な場合、document.activeElementを確認するだけで済みますので、状況に応じて適宜ご使用いただければと思います！

以上、JavaScriptでフォーカスされている要素を取得する方法のご紹介でした！