SYNCERのロゴ
アイキャッチ画像

Document.activeElement - フォーカス中の要素

activeElementは、Documentのプロパティです。フォーカス中の要素を返します。フォーカス中の要素がなければbody要素、それもなければhtml要素、それもなければnullを返します。

概要

名前
activeElement
所属
Document
IDL
readonly attribute Element? activeElement;
仕様書
https://html.spec.whatwg.org/multipage/interaction.html#dom-document-activeelement

説明

フォーカス中の要素、またはbody要素、またはhtml要素、またはnullを返す。

デモ

Document.activeElementのデモです。フォーカス中の要素を監視しています。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
<style>
	input { font-size: 16px ; width: 50% ; }
	div#result { white-space: pre-wrap ; }
</style>
</head>
<body>
	<p><input></p>
	<p><a href="#top" onclick="return false;">リンク</a></p>
	<p><button>ボタン</button></p>
	<hr>
	<div id="result"></div>
<script>
setInterval( function () {
	var value = document.activeElement ;

	if ( lastValue !== value ) {
		document.getElementById( "result" ).innerHTML = "" ;
		console.log( value ) ;
		document.getElementById( "result" ).appendChild( new Text( value + "\n\n" ) ) ;
		if( value.tagName ) document.getElementById( "result" ).appendChild( new Text( value.tagName + "要素" ) ) ;
	}
}, 100 ) ;

var lastValue ;
</script>
</body>
</html>

サポート状況

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月6日 (金)
コンテンツを公開しました。