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

こんにちは、ryohei(@ityryohei)です!

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

JavaScriptでユーザーにフォーカスされている要素を取得したいんだけど、良い方法ないかな?

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

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

document.activeElementで取得する

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

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でフォーカスされている要素を取得する方法のご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

短期間でプログラミングを習得してエンジニアになろう!

エンジニアに転職を考えている方、独学で勉強中の方必見!CodeCampなら自宅にいながら実務経験があるエンジニアからマンツーマンで指導してもらうことができます。実践的なスキルを習得して一日でも早いエンジニアデビューを目指しましょう。まずは無料体験から!

CodeCamp 公式サイトへ

おすすめの書籍