7cc@はてなブログ

JavaScriptとかとか

document.activeElement

概要

focusのある要素を返す。

  • 基本的にformの部品が対象
  • 他には<a>, <area>, <detail>, tabindex属性付き要素など、フォーカス可能な要素も返す
  • iframe内の要素にフォーカスがある時は、その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を見ればリンクがクリックされたと分かる。

デモ

http://jsbin.com/fihop/4

IEとdocument.activeElement

次の要素もclickでactiveElementになる

  • widthCSSが指定されているdiv
  • fieldset
  • たぶん他にもいろいろ・・・

つまり最初に書いた通り、formの部品以外では注意が要る。