Window: focus イベント

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.

focus イベントは、要素がフォーカスを受け取ったときに発生します。

focus の反対は blur です。

バブリング なし
キャンセル 不可
インターフェイス FocusEvent
イベントハンドラープロパティ onfocus
同期 / 非同期 同期
Composed はい

ライブデモ

この例ではフォーカスを失ったときに文書の外見を変更します。 addEventListener() を使用して focus および blur イベントを監視します。

HTML

html
<p id="log">Click on this document to give it focus.</p>

CSS

css
.paused {
  background: #ddd;
  color: #555;
}

JavaScript

js
function pause() {
  document.body.classList.add("paused");
  log.textContent = "FOCUS LOST!";
}

function play() {
  document.body.classList.remove("paused");
  log.textContent =
    "This document has focus. Click outside the document to lose focus.";
}

const log = document.getElementById("log");

window.addEventListener("blur", pause);
window.addEventListener("focus", play);

結果

仕様書

Specification
UI Events
# event-type-focus
HTML
# handler-onfocus

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
focus event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

関連情報

  • 関連イベント: blur
  • Element を対象としたこのイベント: focus イベント