JavaScriptでフォーカス時に処理を発動させる方法

この記事では、JavaScriptのaddEventListener()で要素にフォーカスを当てたときに処理を発動させる方法について見ていきたいと思います。

addEventListener()とは

addEventListener()は、指定したイベントが発生したときに処理を発動させることのできるメソッドです。

addEventListener()の書き方

対象.addEventListener(イベントの種類, 処理)

※「対象」には、読み込まれたページを意味する「document」やHTML要素などを指定します。
※「処理」は関数で指定します。

入力欄にフォーカスしたときに処理を発動させる方法

書き方

対象.addEventListener(“focus”, 処理)

例

・HTML

<p id="message">入力欄にフォーカスを当ててください。</p>
<input type="text" id="text">

・JavaScript

let message = document.getElementById("message");
let text = document.getElementById("text");

text.style.backgroundColor = "skyblue";

text.addEventListener("focus", () => {
  text.style.backgroundColor = "pink";
  message.textContent = "入力欄からフォーカスを外してください。"
});

text.addEventListener("blur", () => {
  text.style.backgroundColor = "skyblue";
  message.textContent = "入力欄にフォーカスを当ててください。"
});

この例では、addEventListener()を用いて、入力欄にフォーカスを当てているときは背景色がピンクになり、フォーカスが外れているときは背景が青色になるという内容になっています。

尚、ここで用いているgetElementById()については以下の記事を参照していただくことができます。
JavaScriptのgetElementById()の使い方

では確かめて見ましょう。

入力欄にフォーカスを当てると背景色がピンクに変わり、入力欄からフォーカスを外すと背景色が青色に変わりますね。

まとめ

以上に見てきたように、addEventListener()のイベントの種類に「focus」を指定することで、
要素にフォーカスを当てたときに指定した処理を発動させることができます。