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を利用した導入事例のご紹介

実際に構築を行ったAWSの事例を紹介しています。導入の目的に近い事例をご覧いただくと、実際の構成例やメリット、注意点などが把握できます。

ブックオフコーポレーション株式会社様
第一生命保険株式会社様
株式会社電通様
株式会社LIFULL様
株式会社リブセンス様
TBSアナウンス部様
明治大学様
拓殖大学様