Document: hasFocus() メソッド

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

hasFocus() は Document インターフェイスのメソッドで、文書または文書内の何れかの要素がフォーカスを持っているかどうかを示す論理値を返します。このメソッドは、文書内のアクティブな要素がフォーカスを持っているかどうかを特定するために使用することができます。

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

構文

hasFocus()

<p id="log">フォーカスのチェック結果はこちらに表示されます。</p>
<button id="newWindow">新しいウィンドウを開く</button>

body {
 padding: 1rem;
 background: gray;
 text-align: center;
 font-size: 1.5rem;
}

JavaScript

const body = document.querySelector("body");
const log = document.getElementById("log");
function checkDocumentFocus() {
 if (document.hasFocus()) {
 log.textContent = "この文書にフォーカスがあります。";
 body.style.background = "white";
 } else {
 log.textContent = "この文書にはフォーカスがありません。";
 body.style.background = "gray";
 }
}
function openWindow() {
 window.open(
 "https://developer.mozilla.org/",
 "MDN",
 "width=640,height=320,left=150,top=150",
 );
}
document.getElementById("newWindow").addEventListener("click", openWindow);
setInterval(checkDocumentFocus, 300);