https://idea-hack.com/courses/lets-understand-the-methods-and-properties-related-to-browser-operations-that-are-often-used-in-javascript/lessons/whether-the-page-is-focused-by-javascript/
https://idea-hack.com/courses/lets-understand-the-methods-and-properties-related-to-browser-operations-that-are-often-used-in-javascript/lessons/whether-the-page-is-focused-by-javascript/

JavaScriptでページにフォーカスが当たっているかどうかを判定するのに便利なfocus・blurイベントの使い方

ページにフォーカスが当たっているか調べる

JavaScriptでページにフォーカスが当たっているかどうかを判断するにはfocus()blur()イベントを使うのが便利です。

これらのイベントは、WEBページ上での音声プレイヤーの実装に使われます。

ページ上で音声を再生しても、違うページに移動したりすると、音声が止まることがありませんか?

この様な挙動は、これらのイベントを組み合わせて行われています。

イベント

イベント名発生タイミング
focus()ページにフォーカスが当たった時
blur()ページにフォーカスが外れた時
フォーカス系イベント

サンプルコード

サンプルコードとして、ページにフォーカスが当たっている時と当たっていない時で異なるメッセージを出力するスクリプトを紹介します。

Output
フォーカスを検知しているか判別する
Pug
div フォーカスを検知しているか判別する
	#targetText
JavaScript
const targetText = document.getElementById( 'targetText' );
window.addEventListener('load', () => {
	targetText.textContent = `イベントが発生していません。`;
});
window.addEventListener('blur', () => {
	targetText.textContent = `このページからフォーカスが外れています。`;
});
window.addEventListener('focus', () => {
	targetText.textContent = `このページにフォーカスが当たっています。`;
});
インストラクター
コメント

コメントを残す