DOM

：

：

Document.hasFocus() メソッド

　編集：2022.09.03 by T.A.

→、

Document 文書または文書内の何れかの要素がフォーカスを持っているかどうかを Boolean で返します。

このメソッドは、文書内のアクティブな要素がフォーカスを持っているかどうかを特定するために使用することができます。

文書を見ている時、文書内でフォーカスを持つ要素は常にアクティブ要素ですが、アクティブ要素がフォーカスを持っているとは限りません。例えば、フォアグラウンドになっていないポップアップ ウィンドウ内のアクティブ要素はフォーカスを持ちません。

構文
Document.hasFocus()
戻り値

Boolean。

例

この例は、文書がフォーカスを持っているかどうかを 300ミリ秒ごとに検査します。hasFocus() の機能をテストするために、ボタンを押して新しいウィンドウを開き、二つのページの間を切り替えてみてください。

HTML： 

<p id="log">Awaiting focus check.</p>
<button onclick="openWindow()">Open a new window</button>

JavaScript： 

function checkPageFocus(){
  let body = document.querySelector('body');
  let log = document.getElementById('log');

  if (document.hasFocus()) {
    log.textContent = 'This document has the focus.';
    body.style.background = '#fff';
  }
  else {
    log.textContent = 'This document does not have the focus.';
    body.style.background = '#ccc';
  }
}

function openWindow() {
  window.open('https://developer.mozilla.org/', 'MDN', 'width=640,height=320,left=150,top=150');
}

// Check page focus every 300 milliseconds
setInterval(checkPageFocus, 300);

1秒毎に document.hasFocus() でフォーカス状態を得て、内容を表示する。

HTML： 

結果表示：<SPAN id=IdSpan>SPAN要素</SPAN><BR>

JavaScript： 

function Job(){
  let K=document.hasFocus();	//フォーカスを得ているか否か。
  let S="";
  if(K)S=document.activeElement.tagName; //フォーカスを得ていれば、アクティブ要素の名前を得る。
  IdSpan.innerHTML=K+"："+S;	//情報表示
}
T=setInterval("Job()",1000);	//タイマー起動（1秒毎にJob()を実行）。TにタイマーIDを入れておき、後で停止できるようにする。

タイマーを停止させるには、clearInterval(T) を実行する。

テスト