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 July 2015.

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

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

構文

js
hasFocus()

引数

なし。

返値

文書内のアクティブ要素にフォーカスがない場合は false を返します。 文書内のアクティブ要素にフォーカスがある場合は true を返します。

例

この例は、文書がフォーカスを持っているかどうかを検査します。 checkPageFocus() という関数は、document.hasFocus() の結果に応じて段落要素を更新します。 新しいウィンドウを開くと文書からフォーカスがなくなり、元のウィンドウに戻すとフォーカスが回復します。

HTML

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

JavaScript

js
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);

結果

仕様書

Specification
HTML Standard
# dom-document-hasfocus-dev

ブラウザーの互換性

BCD tables only load in the browser

関連情報