Focus events

概要

focus / blur / focusin / focusout イベントにより、要素がフォーカスを受け取ったり失ったりした際の処理を実装します。

対応ブラウザ

基本構文

const input = document.querySelector('input');
input.addEventListener('focus', () => {
  input.style.borderColor = 'blue';
});
input.addEventListener('blur', () => {
  input.style.borderColor = '';
});

実務での使いどころ

• Focus events の活用

  フォーカスイベント。要素のフォーカス取得・喪失を検知するイベント群。

注意点

アクセシビリティ

• スクリーンリーダーでの読み上げを確認すること。

参考リンク

• MDN Web Docs — Focus events