JavaScriptのonchange・onselectとは？入力内容の変更・選択時に発生するイベントを解説
onchange と onselect は、フォーム要素の内容が変化したとき、または文字が選択されたときに発生するイベントです。
select・textarea・input（type=”text”）など、入力系の要素でよく利用されます。
onchangeイベントとは？
onchange は、フォーム要素の内容が変更されたときに発生するイベントです。
セレクトメニューの選択変更や、テキスト入力欄の内容が変更されたタイミングで処理を実行できます。
使用例：セレクトメニューの選択が変わったら処理を実行
<select onchange=”idou()”>
<option>選択肢1</option>
<option>選択肢2</option>
</select>
<option>選択肢1</option>
<option>選択肢2</option>
</select>
→ 選択項目が変わった瞬間に idou() が実行されます。
onselectイベントとは？
onselect は、テキスト入力欄の文字列が選択されたときに発生するイベントです。
textarea や input type=”text” で利用できます。
使用例：文字列が選択されたら処理を実行
document.form1.text1.onselect = myFunc;
→ ユーザーが文字列をドラッグして選択した瞬間に myFunc() が実行されます。
onchange と onselect の違い
| イベント | 発生タイミング |
|---|---|
| onchange | 値が変更されたとき（選択変更・入力変更） |
| onselect | 文字列が選択されたとき |
→ 入力内容の変化を検知したい場合は onchange、
文字選択を検知したい場合は onselect を使います。
実際のフォーム例
<form name=”form1″>
名前：
<input type=”text” name=”text1″
onchange=”alert(‘内容が変更されました’)”
onselect=”alert(‘文字が選択されました’)”>
名前：
<input type=”text” name=”text1″
onchange=”alert(‘内容が変更されました’)”
onselect=”alert(‘文字が選択されました’)”>
コメント：
<textarea name=”comment” onchange=”console.log(‘変更あり’)”></textarea>
</form>
→ 入力内容の変更や文字選択を簡単に検知できます。
まとめ
onchange：入力内容や選択内容が変わったときに発生onselect：文字列が選択されたときに発生- select・textarea・input(type=”text”) でよく利用される
- 入力チェック・UI反応・ログ取得などに便利
