.activeElement

https://developer.mozilla.org/en-US/docs/Web/API/Document.activeElement

現在フォーカスが当たっている要素を返し、もしユーザーが何かキー入力していたら、キーストロークイベントを取得します。

文法
説明
例
仕様
ブラウザ互換性

文法

Syntax この属性は、読み込み専用です。

その時点でテキストセレクション(text selection)を持つ場合には、多くの場合<input>または<textarea>オブジェクトを返します。もしそうであれば、要素のselectionStartとselectionEndプロパティを使用して、より詳細な情報を取得することが可能です。それ以外の場合であれば、フォーカスされる要素は、<select>要素、またはボタン、チェックボックス、ラジオのtypeの<input>要素になるでしょう。

注意: Macではテキストでは無いinput要素に、フォーカスが当たらない傾向があります。

一般的に、ユーザーはそのページのフォーカス可能な要素に対して、Tabキーを押すことでフォーカスを移動し、 Spaceキーを押すことでそれをアクティブ(ラジオであれば、それが選択される)にすることが可能です。

静的なテキストノードから構成されるのドキュメントの選択を、「フォーカス」と混同しないでください。そのようなドキュメントの選択については、 window.getSelection()を参照してください。

何も選択されていない場合は、アクティブな要素はページの<body>、またはnullになります。

注意: この属性は開発中のHTML5仕様の一部です。

説明

var curElement = document.activeElement;

例

<!DOCTYPE HTML>
<html>
<head>
    <script type="text/javascript" charset="utf-8">
    function init() {

        function onMouseUp(e) {
            console.log(e);
            var outputElement = document.getElementById('output-element');
            var outputText = document.getElementById('output-text');
            var selectedTextArea = document.activeElement;
            var selection = selectedTextArea.value.substring(
            selectedTextArea.selectionStart, selectedTextArea.selectionEnd);
            outputElement.innerHTML = selectedTextArea.id;
            outputText.innerHTML = selection;
        }

        document.getElementById("ta-example-one").addEventListener("mouseup", onMouseUp, false);
        document.getElementById("ta-example-two").addEventListener("mouseup", onMouseUp, false);
    }
    </script>
</head>
<body onload="init()">
<div>
    Select some text from one of the Textareas below:
</div>
<form id="frm-example" action="#" accept-charset="utf-8">
<textarea name="ta-example-one" id="ta-example-one" rows="8" cols="40">
This is Textarea Example One:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt, lorem a porttitor molestie, odio nibh iaculis libero, et accumsan nunc orci eu dui.
</textarea>
<textarea name="ta-example-two" id="ta-example-two" rows="8" cols="40">
This is Textarea Example Two:
Fusce ullamcorper, nisl ac porttitor adipiscing, urna orci egestas libero, ut accumsan orci lacus laoreet diam. Morbi sed euismod diam.
</textarea>
</form>
Active Element Id: <span id="output-element"></span><br/>
Selected Text: <span id="output-text"></span>

</body>
</html>

仕様

ブラウザ互換性

デスクトップ
機能	Chrome	Firefox (Gecko)	IE	Opera	Safari
基本	2	3.0	4	9.6	4.0

モバイル
機能	Android	Firefox Mobile	IE Mobile	Opera Mobile	Safari Mobile
基本	?	?	?	?	?

このページは、ページトップのURL先のMozilla Developer Network(以下、MDN)のコンテンツを翻訳した内容を基に構成されています。構成について異なる点も含まれますので、下記の項目を確認し、必要に応じて元のコンテンツをご確認ください。もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

特定のブラウザに特化しすぎている情報やあまりにも古い情報、または試験的に導入されているようなAPIや機能については、省略していることがあります。
例やデモについて、実際にページ内で動作させる関係で一部ソースコードを変更している場合や、その例で使用しているコンテンツの単語や文章などを日本人向けに変更しいてる場合があります。
MDNの更新頻度が高いため、元のコンテンツと比べ情報が古くなっている可能性があります。
"訳注:"などの断わりを入れた上で、日本人向けの情報の追記を行っている事があります。