document.hasFocus()

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

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

構文

var focused = document.hasFocus();

返値

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

この例は、文書がフォーカスを持っているかどうかを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);

結果

仕様書

仕様書 状態 備考
HTML Living Standard
Document.hasFocus() の定義
現行の標準 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
hasFocusChrome 完全対応 45Edge 完全対応 12Firefox 完全対応 3IE 完全対応 6Opera 完全対応 15Safari 完全対応 ありWebView Android 完全対応 45Chrome Android 完全対応 45Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明

関連情報