タイトル: テキスト/セレクトボックス/ラジオボタン変更時のJS関数呼び出し
SEOタイトル: HTML フォーム要素変更時に JavaScript の関数を呼び出す方法（onchange / oninput / onkeyup / addEventListener の使い分け）
| この記事の要点 |
|
フォーム部品の変更を検知する 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