https://idea-hack.com/courses/lets-learn-how-to-operate-form-elements-with-javascript/lessons/how-to-use-change-input-keyup-keypress-events-to-detect-changes-in-text-boxes-with-javascript/
https://idea-hack.com/courses/lets-learn-how-to-operate-form-elements-with-javascript/lessons/how-to-use-change-input-keyup-keypress-events-to-detect-changes-in-text-boxes-with-javascript/

JavaScriptでテキストボックスの変更を検知するchange・input・keyup・keypressイベントの使い方

JavaScriptでテキストボックスやテキストエリアの変更を検知する4つのイベント

JavaScriptにはテキスト入力に関するイベントが複数用意されております。

全てを使いこなしている人はそういません。というのも、細かな違いはあれど、最終的に求める結果は同じであることが多く、通常は1つのイベントを使い、困った時に違うイベントを模索するのが一般的です。

JavaScript初心者の方は使い分けをしていないかもしれません。それでもほとんど困ることはありません。

当サイトでは下記の4つのイベントの挙動を見ていきます。

イベント

イベント意味
changeinput要素の値に「変更を加え、フォーカスを外した時、またはEnterを押した時」に発火
inputinput要素に「入力を行った時」に発火
keyupinput要素に「入力を行い、キーを離した時」に発火
keypressinput要素に「入力を行う際、キーを押した時点」で発火。また、keyupと違いbackspaceやDelete Keyには反応しない。また日本語入力(全角)も反応しない。
input要素の各イベントの細かい違いを抑えることは非常に大事

サンプルコード

サンプルコードを利用して各イベントの違いを確認してください。keypressは不便なので割愛します。

Change

Output
Pug
#targetArea.text-center
		form.form-group
			input#targetText.form-control(type="text" value="")
	#formResult 
JavaScript
const targetText = document.getElementById( 'targetText' );
const targetResult = document.getElementById( 'formResult' );

targetText.addEventListener( 'change', onChange );

function onChange() {
	const targetTextValue = targetText.value;
	targetResult.textContent = targetTextValue;
}

input

Output
Pug
#targetArea2.text-center
		form.form-group
			input#targetText2.form-control(type="text" value="")
	#formResult2
JavaScript
const targetText2 = document.getElementById( 'targetText2' );
const targetResult2 = document.getElementById( 'formResult2' );

targetText2.addEventListener( 'input', onInput );

function onInput() {
	const targetTextValue2 = targetText2.value;
	targetResult2.textContent = targetTextValue2;
}

keyup

Output
Pug
#targetArea3.text-center
		form.form-group
			input#targetText3.form-control(type="text" value="")
	#formResult3
JavaScript
const targetText3 = document.getElementById( 'targetText3' );
const targetResult3 = document.getElementById( 'formResult3' );

targetText3.addEventListener( 'keyup', onKeyUp );

function onKeyUp() {
	const targetTextValue3 = targetText3.value;
	targetResult3.textContent = targetTextValue3;
}
インストラクター