PlusOne Blog

【JavaScript】form の input の入力値をJSで取得するにはどうしたらよいか?

form の input の入力値を取得するには、input への入力のイベント「input イベント」または「change イベント」を利用します。 
 
「input イベント」⇒input エリアに文字を入力するたびに発火します。
「change イベント」⇒input エリアに文字を入力して Enterキーを押すと発火します。
 
●要素の属性値にイベントハンドラを登録する場合は 「oninput 属性」または「onchange 属性」を使用します。

   <input type="text" name="test1" oninput="inputChange01()">

   <input type="text" name="test3"  onchange="inputChange02()">

 
●addEventListener を使用して、イベントハンドラを登録する場合

   input.addEventListener('input', inputChange);

   input.addEventListener('change', inputChange2);

 
●引数 event で、入力された値を取得することができます。
・「oninput 属性/イベント」

  et inputChange = (e) => {
     text_val.textContent = e.currentTarget.value;  //テキストエリアに入力されたテキスト
     input_val.textContent = e.data;  //今、入力されたテキスト
  }

・「change 属性/イベント」

  et inputChange = (e) => {
     text_val.textContent = e.currentTarget.value;  //テキストエリアに入力されたテキスト
  }

 
 

 

この記事を読む
記事一覧に戻る