JavaScript | フォーカスがされた時、外れた時のイベントを実装する方法

Javascriptでフォームパーツにフォーカスがされた時、またはフォーカスが外れた時に発火するイベントの実装方法を紹介しています。

フォーカスイベントの実装サンプル

JavascriptのaddEventListener()を使ったフォーカスイベントの実装サンプルとサンプルコードになります。

See the Pen JavaScript | Copy the Textarea by yochans (@yochans) on CodePen.

HTMLにはテスト用のテキストフォームを設置しています。

また、イベントの発火を確認するための出力用に<p>タグをひとつ設置しています。

<p><input type="text" name=""></p>
<p id="output"></p>

対象とするフォームをquerySelector()で変数「text_form」として取得しています。

出力用の<p>タグは変数「output」になります。

フォーカスされた時の発火イベントはaddEventListener()「focus」を指定、フォーカスが外れた時の発火イベントには「blur」を指定しています。

addEventListener()でのフォーカスオンオフイベントには「focusin」「focusout」という指定も可能ですが、バブリングを回避する「focus」「blur」を採用しています。

let text_form = document.querySelector(`input[type='text']`);
let output = document.querySelector('#output');

// focus in event
text_form.addEventListener(`focus`, () => {
	output.textContent = 'focus in';
});

// focus out event
text_form.addEventListener(`blur`, () => {
	output.textContent = 'focus out';
});