JavaScript - フォーカスの切り替えイベント

JavaScriptでフォームパーツなどをフォーカスした時、またはフォーカスから外れた時をトリガーにしたイベントを実装する簡単なコード例を紹介しています。

HTMLには、フォーカスの切り替えを検出する対象として<input type="text">タグにid名「target」を指定しています。

対象がフォームパーツでない場合はHTML属性「tabindex」を指定する事でフォーカスが可能になります。

<div>
	<p id="output">フォーカスしていません。</p>
	<input type="text" id="target">
</div>

CSSでは、イベントの対象とするためのサイズを設定しています。

また、CSSでは疑似クラス「focus」にて、要素をクリックしたときのフォーカス時に表示するスタイルを指定する事も可能です。

#target {
	width: 250px;
	margin: 5px;
	padding: 10px;
	font-size: 24px;
}

#output {
	font-size: 20px;
}

/* フォーカス時のスタイルを指定 */
#target:focus {
	/* outline: 2px solid #000fff; */
}

対象とする要素はquerySelector()で指定、addEventListener()で「focus」を指定して、要素がフォーカスされた事を検出するイベントを実装しています。
また「blur」イベントでフォーカスが外れた事を検出します。

コード例では各イベントの検出時に出力エリアのテキストを書き換えています。

// 対象のフォーム要素
let target = document.querySelector('#target');
// 出力エリア
let outoput = document.querySelector('#output');

target.addEventListener('focus', () => {
	// フォーカスされた時の処理
	outoput.innerHTML = 'フォーカスしています。';
});

target.addEventListener('blur', () => {
	// フォーカスが外れた時の処理
	outoput.innerHTML = 'フォーカスしていません。';
});