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にかなり近いタイミングのイベント発生になります。

AWS構築サービスの全てをまとめた資料を公開中

ハックノート(TOWN株式会社)では、AWSの導入や構築支援を行っています。AWS導入メニューやサービス詳細、構成例や費用を掲載した資料をダウンロードできます。

AWSの新規導入やAWSへの移行を検討の際は、ぜひご参考ください。


APNコンサルティングパートナー

TOWN株式会社はAmazon公認コンサルティングパートナーです。