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';
});