document.activeElement
概要
focusのある要素を返す。
- 基本的にformの部品が対象
- 他には
<a>,<area>,<detail>,tabindex属性付き要素など、フォーカス可能な要素も返す - iframe内の要素にフォーカスがある時は、そのiframeが返る
- iframe内の要素まで調べる場合は、
document.activeElement.contentDocument.activeElementで
フレーム内の activeElement - なんとなくな Developer のメモ
- iframe内の要素まで調べる場合は、
仕様はここ。8 User interaction — HTML Standard.htm 8.4.2 Focus management
子要素があっても、activeElementはフォーカス可能な要素になる。
こういうhtmlのspanをクリックすると、
<p tabindex="0"><span>span</span></p>
event.target // span document.activeElement // p
という具合になる。
フォームの部品以外の互換性
要素をクリックしたときのdocument.activeElementが、その要素になるか
| 要素 | Chrome | Firefox | IE |
|---|---|---|---|
| a | ☓*1 | ○ | ○ |
| area | ○ | ☓*1 | ○ |
| tabindex | ○ | ○ | ○ |
*1 tabキーや、element.focus()でフォーカスを移動している時は返す。そうでなければbodyになる
スクリプトでelement.focus()すれば同じ結果が得られる。
しかしChromeではフォーカスがあると水色の枠線で囲まれて若干気持ち悪い。
Chrome以外なら、document.activeElementを見ればリンクがクリックされたと分かる。
デモ
IEとdocument.activeElement
次の要素もclickでactiveElementになる
- width等のCSSが指定されているdiv
- fieldset
- たぶん他にもいろいろ・・・
つまり最初に書いた通り、formの部品以外では注意が要る。
