[JavaScript] フォーカスが当たっている要素オブジェクトを取得する（.activeElement）

投稿日：2017年12月13日更新日：2018年5月2日

フォーカスが当たっている要素オブジェクトを取得するには、.activeElementを使用します。

サンプルソース

例）フォーカスが当たっている要素オブジェクトを取得するサンプル

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Sample</title>
<script>
function test(){
  //テキストボックス３にフォーカスを当てる
  document.getElementById("txt3").focus();

  //フォーカスが当たっているオブジェクトを取得する
  var obj = document.activeElement; 

  //取得したオブジェクトのvalue値をアラート表示する
  alert(obj.value);
}
</script>
</head>
<body>
  <input type="button" id="btn1" value="ボタン" onclick="test();">
  <input type="text" id="txt1" value="テキストボックス１" >
  <input type="text" id="txt2" value="テキストボックス２">
  <input type="text" id="txt3" value="テキストボックス３">
</body>
</html>

<!DOCTYPE html>

<head>

<title>Sample</title>

function test(){

//テキストボックス３にフォーカスを当てる

document.getElementById("txt3").focus();

//フォーカスが当たっているオブジェクトを取得する

var obj = document.activeElement;

//取得したオブジェクトのvalue値をアラート表示する

alert(obj.value);

}

</script>

</head>

<body>

</body>

</html>

（結果）: テキストボックス３

解説

フレーム内の要素にフォーカスが当たっている場合は、フレームオブジェクトが取得されます。

執筆者：とら