JavaScriptでフォーカスのあたっている要素を取得する「document.activeElement」

JavaScriptでフォーカスのあたっている要素を取得する「document.activeElement」

Posted at August 29,2013 1:55 AM
Tag:[HTML5, JavaScript]

JavaScriptでフォーカスのあたっている要素を取得できるHTML5の新機能「document.activeElement」について紹介します。

document.activeElement

1.document.activeElementとは

document.activeElement」からの引用です。

document.activeElementは冒頭に記したとおり、フォーカスのあたっている要素を取得するためのdocumentプロパティで、HTML5で策定された新機能みたいです。

HTML5 - 6.5.3 Document-level focus APIsより

The activeElement attribute on DocumentHTML objects must return the element in the document that is focused. If no element in the Document is focused, this must return the body element.

仕様の原文では「documentオブジェクトのactiveElement属性は、フォーカスされているdocument内の要素を返却しなければならない。もしdocument内の要素がフォーカスされていなければ、body要素を返却しなればならない。」とあり、フォーカスされていないときの振舞いも決められています。

すべて確認できていませんが、フォーカスがあたったと認識されるのはフォーム関連の要素のようです。

次項のサンプルで試したところ、ブラウザによって若干振舞いが異なるようです。Firefox23ではすべて動作しました。

2.サンプル

document.activeElementが動作するサンプルを作ってみました。

document.activeElementサンプル
document.activeElementサンプル

フォームの部品をフォーカスすると、それぞれのid属性および選択したテキストを下に表示します。

3.document.activeElementの使い方

次のように記述すれば、現在フォーカスがあたっている要素を返却します。フォーカスがあたっていなければbody要素を返却します。

var current = document.activeElement;

jQueryのmouseupイベントと組み合わせると次のようになります。

<script>
$(function(){
    $("#foo").mouseup(function(e){
        var current = document.activeElement;
        $('#result').text( current.id );
    });
});
</script>
<input name="text_field" id="foo" type="text"  class="form" value="あいうえお" />
<div id="result"></div>

選択したテキストも取得する場合、activeElementで取得した要素に対し、selectionStartとselectionEndを適用します。

<script>
$(function(){
    $("#foo").mouseup(function(e){
        var current = document.activeElement;
        $('#result').text( current.id );
        var selection = 
            current.value.substring( current.selectionStart, current.selectionEnd );
        $('#text').text( selection );
    });
});
</script>
<input name="text_field" id="foo" type="text"  class="form" value="あいうえお" />
<div id="result"></div>
<div id="text"></div>

なお、上記のサンプルコードはフォーカスがあたっている要素のイベントで発火するので、body要素が返却されることはありません。

body要素の返却は2項のサンプルで確認してみてください(正しい実装でないかもしれませんが)。

4.参考サイト

参考サイトは以下です。ありがとうございました。

document.activeElement - Web API リファレンス | MDN
関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)