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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
focus event |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- See implementation notes.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.