この記事で分かること
onchangeとonselectの役割と違い- 入力内容の変更を検知する方法
- 文字選択を検知する方法
- フォーム入力と UI 制御への応用
- 実務で使えるサンプルコード
onchange と onselect は、フォーム要素の内容が変化したとき、または文字が選択されたときに発生するイベントです。
select・textarea・input（type="text"）など、入力系の要素でよく利用されます。
onchange イベントとは？
onchange は、フォーム要素の内容が変更されたときに発生するイベントです。
セレクトメニューの選択変更や、テキスト入力欄の内容が変更されたタイミングで処理を実行できます。
使用例：セレクトメニューの選択が変わったら処理を実行
<select onchange="idou()">
<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">
名前：<br>
<input type="text" name="text1"
onchange="alert('内容が変更されました')"
onselect="alert('文字が選択されました')">
<br><br>
コメント：<br>
<textarea name="comment" onchange="console.log('変更あり')"></textarea>
</form>
→ 入力内容の変更や文字選択を簡単に検知できます。
JavaScript 初心者におすすめの学習書籍
書籍で学ぶのが向いている人
- 紙の本で体系的に学びたい
- ネット記事だけだと情報が断片的に感じる
- フォーム操作や入力イベントを基礎から理解したい
onchange・onselect のような「入力内容の変化」や「文字選択」を扱うイベントは、
フォーム操作の基礎であり、書籍ではこれらを体系的に順序立てて学べるため理解が深まりやすいです。
いちばんやさしい JavaScript の教本
写真や図が多く、手を動かしながら学べる初心者向けの入門書です。
入力欄の扱い・イベント処理・フォーム操作など、onchange／onselect の基礎となる内容を丁寧に理解できます。
この本で解決できること：
- 入力欄の動作を視覚的に理解できる
- イベントと UI 反応の関係が分かる
- 実際に動くサンプルで学べるため挫折しにくい
確かな力が身につく JavaScript「超」入門
JavaScriptの基礎を体系的に学びたい方に向いている入門書です。
入力イベントの仕組みを深く理解し、実務レベルのフォーム制御が身につきます。
この本で解決できること：
onchange／onselectの動作原理を体系的に理解できる- 実務で使える入力チェックや UI 制御が身につく
- 現代的な JavaScript のフォーム処理が理解できる
動画で理解を深めたい方へ（Udemy講座）
onchange・onselect は「入力内容の変化」や「文字選択」を扱うイベントで、
実際の UI の動きを動画で見ると理解が一気に深まります。
Udemy では、フォーム操作・入力チェック・イベント処理を初心者向けに丁寧に解説した講座が多数あります。
初心者のためのJavaScript 完全入門
関数・条件分岐・イベントなど、JavaScriptの基礎を体系的に学べる人気講座です。
入力欄の変化を扱うイベント処理もカバーしており、onchange／onselect の理解に直結します。
この講座で解決できること：
- 入力内容の変化を視覚的に理解できる
- 文字選択イベントの動作が分かる
- 初心者がつまずきやすいポイントを丁寧に解説
→ 初心者のためのJavaScript 完全入門（Udemy）
超JavaScript 完全ガイド 2026
基礎から応用まで幅広く学べる講座で、入力イベントを使った UI 制御をさらに深めたい方に最適です。
この講座で解決できること：
- 実務レベルの入力チェック・UI 反応を理解できる
- イベント処理と DOM 操作の連携が身につく
- 現代的なフォーム実装をまとめて習得
体系的に学びたい方へ（スクールという選択肢）
独学の限界を感じやすいポイント
- 入力イベントの使い分けで迷いやすい
- フォーム制御の正しい書き方が分からない
- コードレビューを受ける機会がない
- 学習の順番に自信が持てない
スクールでは、プロの講師が学習ロードマップを作成し、
onchange／onselect を使った入力チェックや UI 制御など、
つまずきやすい部分を丁寧にサポートしてくれます。
無料相談で得られるメリット
- あなたのレベルに合わせた学習計画を作成
- 独学でつまずきやすい部分を事前に把握
- 学習方法の改善点をプロがアドバイス
- エンジニア転職を視野に入れたキャリア相談も可能
JavaScript を効率よく学びたい方には、未経験からエンジニアを目指せる
DMM WEBCAMP の学習コースも選択肢のひとつです。
onchange・onselect に関するよくある質問（FAQ）
onchange は入力途中でも発生する？
いいえ。入力欄からフォーカスが外れたタイミングで発生します。
リアルタイムに入力を検知したい場合は？
oninput を使うと入力のたびにイベントが発生します。
onselect はどんなときに使う？
文字選択をトリガーにした UI 反応（コピー案内、ツールチップ表示など）に使われます。
select 要素で onselect は使える？
いいえ。onselect はテキスト選択時のイベントなので、select 要素では発生しません。
まとめ
onchange：入力内容や選択内容が変わったときに発生onselect：文字列が選択されたときに発生select・textarea・input(type="text")でよく利用される- 入力チェック・UI反応・ログ取得などに便利
