この記事の要点

フォーム部品の値が変わったタイミングで JavaScript 関数を呼ぶには onchange / oninput / onkeyup の 3 属性が基本 onchange はフォーカスを失った時点で発火。テキストは入力中に動かない oninput は1文字ごとに発火するためリアルタイム検索・文字数カウントに最適 onkeyup はキーを離した瞬間に発火。IME 変換中の挙動はブラウザ依存 最近は属性ではなく addEventListener による登録が推奨。CSP 対策や複数ハンドラ登録にも有利

フォーム部品の変更を検知する 3 つの方法

HTML のフォーム部品（テキストボックス・セレクトボックス・ラジオボタン）で値の変化を検知したいときに使うイベントは、用途によって change / input / keyup を使い分けます。属性として書く場合と addEventListener で登録する場合の両方を押さえておきましょう。

onchange — 値が確定した時点で呼ぶ

テキストボックスではフォーカスが外れた瞬間、セレクトボックス・ラジオボタンでは選択が変わった瞬間に発火します。

<input type="text" onchange="testFunc()" />
<select onchange="testFunc()">
  <option value="A">A</option>
  <option value="B">B</option>
</select>
<input type="radio" name="r" value="1" onchange="testFunc()" />

テキストボックスで onchange を使うと、入力中はずっと無反応で、外をクリックして初めて関数が呼ばれます。「確定した値だけ処理したい」用途に向いています。

oninput — 1 文字ごとに呼ぶ

テキストボックス・テキストエリアの入力内容が変化した瞬間に発火します。コピー＆ペーストや IME 確定でも反応するため、リアルタイム処理に最適です。

<input type="text" oninput="testFunc(this.value)" />
<textarea oninput="countChars(this)"></textarea>

リアルタイム検索のサジェスト・文字数カウンタ・入力バリデーションは oninput 一択です。

onkeyup — キーを離した時点で呼ぶ

キーボードのキーが離された瞬間に発火します。oninput との違いは、IME 変換中やコピー＆ペースト時の挙動です。

<input type="text" onkeyup="testFunc()" />

イベント	発火タイミング	IME 変換中	ペースト
change	フォーカスを失った時	影響なし	反応する
input	値が変わるたび	確定時のみ	反応する
keyup	キーを離した瞬間	1 キーごとに発火	反応しない

addEventListener による登録

属性に書く方法（HTML 属性ハンドラ）は手軽ですが、CSP（Content Security Policy）でインライン JS を禁止している環境では使えません。実務では addEventListener で登録するのが推奨です。

const input = document.querySelector('#myInput');

input.addEventListener('change', () => {
  console.log('値が確定:', input.value);
});

input.addEventListener('input', (e) => {
  console.log('入力中:', e.target.value);
});

addEventListener なら複数のハンドラを 1 要素に登録できるほか、{ once: true } や { passive: true } といったオプションも指定できます。

ラジオボタンで onchange を使う例

同じ name を持つラジオボタンは、選択が切り替わるたびに新しく選ばれた input で change が発火します。

<label><input type="radio" name="size" value="S" onchange="selectSize(this.value)" /> S</label>
<label><input type="radio" name="size" value="M" onchange="selectSize(this.value)" /> M</label>
<label><input type="radio" name="size" value="L" onchange="selectSize(this.value)" /> L</label>

<script>
function selectSize(v) {
  console.log('選ばれたサイズ:', v);
}
</script>

よくある落とし穴

Q: テキストボックスで onchange が動かない
A: change はフォーカスを失った時にしか発火しません。入力中に処理したいなら oninput を使ってください。

Q: 日本語入力で文字数カウントがズレる
A: oninput は IME 変換確定時に発火するため、確定前の予測変換段階は数えられません。確定後の値のみで計算する設計にしましょう。

Q: スマートフォンで onkeyup が反応しない
A: ソフトウェアキーボードは物理キー入力ではないため、keyup イベントが発火しない端末があります。モバイル対応では input を使ってください。

関連

• HTML — 親カテゴリ
• JavaScript — 言語側のリファレンス
• input要素 — テキスト・ラジオの基本
• select 要素 / textarea 要素 — その他のフォーム部品
• addEventListener / removeEventListener — 推奨のイベント登録 API