focus、blurイベント

inputタグやtextareaタグにフォーカスしたとき、なにかのエフェクトを追加したいときは、一般的にCSSで制御するのが基本であるしかし、それだけでは表現できない演出や処理を入れたい場合は、JavaScriptで制御する。

<textarea id="textarea" rows="5" cols="30" ></textarea>

let textArea = document.getElementById('textarea');
    
textArea.addEventListener(`focus`, () => {
  textArea.style.background = '#b0b4df47'
});

textArea.addEventListener(`blur`, () => {
  textArea.style.background = '#ffffff'
  if (textArea.value == '') {
    alert('値を入力してください');
  }
});

参考