JavaScript：テキスト入力関連のイベント、onChange,onInput,onKeyUp

テキストフィールドに入力があった際のイベント処理についてメモします。

function alertValue($this) {
    $this.nextSibling.innerHTML = $this.value;
}

入力のあったthisのすぐとなりの要素にその値を表示する関数です。これを使ってイベントの差を見てみます。

onChange

テキストフィールドに限らずチェックボックスやセレクトメニューなど、あらゆるフォームパーツで「変化が起きた時」に発生するイベント。

<input type="text" onChange="alertValue(this)" />

「変化が起きた時」とありますが、テキストフィールドに関してはフォーカスが外れた時はじめてイベント処理が動きます。

onInput

テキストフィールドに「入力があった時」に発生するイベント。

<input type="text" onInput="alertValue(this)" />

1文字入力ごとにイベントが発生します。

しかしこのonInputはIEで使うことができません。そのため次のonKeyUpで代用できます。

onKeyUp

「押されたキーが持ち上がった時」に発生するイベント。

<input type="text" onKeyUp="alertValue(this)" />

テキストフィールドで使うことで、onInputにかなり近いタイミングのイベント発生になります。