Document: activeElement プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

activeElement は Document インターフェイスの読み取り専用プロパティで、DOM 内で現在フォーカスを持っている要素 (Element) を返します。

多くの場合、 activeElement はその時点でテキストが選択されていれば HTMLInputElement または HTMLTextAreaElement オブジェクトを返します。もしそうなら、そのオブジェクトの selectionStart と selectionEnd プロパティを使用することで、より詳細な情報を得ることができます。その他、フォーカスされている要素が <select> 要素（メニュー）や <input> 要素である場合もあります。

通常、ユーザーはタブキーを押して、フォーカス可能な要素間でページ内のフォーカスを移動させ、スペースバーを使用して 1 つの要素をアクティブにします（つまり、ボタンを押したり、ラジオボタンをトグル切り替えしたりします）。どの要素にフォーカスが当たるかは、プラットフォームやブラウザーの現在の設定によって異なります。例えば、 macOS システムでは通常、既定では、テキスト入力要素以外の要素はフォーカスされません。

メモ: フォーカス（どの要素がユーザー入力イベントを受信しているか）と選択範囲（文書内で現在強調表示されている部分）は同じものではありません。現在の選択範囲は window.getSelection() で取得することができます。

<p>下のテキストエリアからテキストを選択してください。</p> <form> <textarea name="ta-example-one" id="ta-example-one" rows="7" cols="40"> これはテキストエリア 1 です。 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="7" cols="40"> これはテキストエリア 2 です。 Fusce ullamcorper, nisl ac porttitor adipiscing, urna orci egestas libero, ut accumsan orci lacus laoreet diam. Morbi sed euismod diam.</textarea > </form> <p>アクティブな要素の ID: <em id="output-element"></em></p> <p>選択されているテキスト: <em id="output-text"></em></p>

JavaScript

function onMouseUp(e) { const activeTextarea = document.activeElement; const selection = activeTextarea.value.substring( activeTextarea.selectionStart, activeTextarea.selectionEnd, ); const outputElement = document.getElementById("output-element"); const outputText = document.getElementById("output-text"); outputElement.innerHTML = activeTextarea.id; outputText.innerHTML = selection; } const textarea1 = document.getElementById("ta-example-one"); const textarea2 = document.getElementById("ta-example-two"); textarea1.addEventListener("mouseup", onMouseUp, false); textarea2.addEventListener("mouseup", onMouseUp, false);