【JS】inputの変更を検知する方法

今回はinputの変更をJavaScriptで検知する方法を紹介します。

jQueryでもなく、Reactとかも使いません。

純粋なJavaScriptで実装する方法が知りたいねん…って方にピッタリの内容です。

早速完成品のコード

前提：inputに何か入力したら、その下に、即時打ち込んだ文字が表示される

See the Pen Untitled by takosan (@Yukiwebcreate) on CodePen.

コードの解説

解説としては上記のCodepenの中に直接書いてるので、それを見ればある程度わかります。

ここからは、もう少し詳しい説明を見たい方だけご覧ください。

まず、const elmを定義してinput要素を取得して入れます。

そのelm要素に、入力値の変更があった場合にイベントハンドラを登録することで、

inputの入力が検知できるというわけです。

その検出は、addEventListenerで”input”をトリガーとして設定することで実装できます。

コードとしては下記の部分↓

elm.addEventListener("input", handleChange);

こうすることで、elm要素にinputタイプの変更があったとき、プログラムが走るようになります。

走るプログラムは、今回のサンプルでいうと、上記のコードの第２引数に設定したhandleChange関数です。

handleChangeは独自に作成した関数です。以下はhandleChangeの全体のコードです。

// イベント発生時に動作するプログラム
function handleChange(event) {
  // 値を取得してvalueに入れる
  const value = event.target.value;
  // 予め用意した表示用のshow-areaを参照し、そのinnerHTMLに取得したvalueを入れる
  document.querySelector(".show-area").innerHTML = value;
}

handleChange関数の中では、

1. 対象にイベント(今回はinput）が発生したとき、
2. その入力値（value）を取得して、
3. 表示エリア（.show-area）に表示する

という処理を書いています。

上記のような処理を、input要素の変更を検知して実行している、というのが今回のサンプルプログラムになります。

というわけで、今回の重要部分をざっくりと要約します。

○○.addEventListener(“input”, ○○);
でinputを検出できるよ

参考になれば幸いです！！

細かい話：「(event)」ってなんだ？

handleChange関数の書き方について、コード内では

function handleChange(event) { ... }

としていて、その後も

const value = event.target.value;

などとしており、「elm」とは表記していないのにelmの入力値を検出できていますよね。

という方に少し解説しておきます。

function handleChange(event) { ... }

というコードで、(event)として受け取っているものは「イベントオブジェクト」というもので、

その中には実はイベントが発生したDOM要素への参照である「event.target」や、

イベントのタイプである「event.type」

イベントが発生した時のマウスの位置情報である「event.clientX」「event.clientY」など、

イベントに応じた詳細な情報が含まれいます。

今回は(event)とざっくり指定してから、

const value = event.target.value;

と記述することで、

イベントオブジェクトに含まれるevent.target、つまり今回で言うと呼び出された元のelm要素を参照することができます。

これの何が良いかというと、handleChange関数内では(event)としてしか記述していないので、

他にもう一つinputイベントを検出したいelm2などが仮にあった場合でも、同じhandleChange関数をそのまま利用することができます。

このあたりはプログラムによって、完全に他に影響が出ないように明示的に対象要素を限定して書くか、

汎用性を高めるために上記のようにどこでも利用できるように書くかは変えていく必要があると思いますが、

今回は汎用性がある感じで書きました。合わせて参考にしてもらえると嬉しいです。

JavaScriptオススメ書籍

JavaScriptを基本から学びたい方には、こちらの書籍がオススメです。

こちらはWebクリエイターボックスのManaさんが書かれた書籍で、ポイントは以下のような感じです。

・JavaScriptの基本から実装まで必要なことがすべて学べる
・図解が充実していて読みやすい
・章立てや構成がよくできていてスムーズに読み進められる
・アニメーションやイベントの知識と技術がつまっている
・サンプルプログラムがWeb上からダウンロードできる（自分でコードを用意しなくて良い）

タイトルどおり、一冊でまるっと学べる書籍になっているので、初学者必携の一冊といってもいいでしょう。

JavaScriptをなんとなくで触ってきた人にとっては、より理解が深まる書籍かと思います。