[JavaScript] 値の変更イベントを取得する（onChange）

投稿日：2016年10月9日更新日：2018年5月2日

値の変更イベントを取得するには、onchangeイベントハンドラを使用します。

サンプルソース

例）値が変わるとアラートを表示する

function myFnc(){
  alert("値が変更されました。");
}

function myFnc(){

alert("値が変更されました。");

}

<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>サンプル</title>
  <script src="sample.js"></script>
</head>
<body>
  <input type="text" value="hoge" onchange="myFnc();">
</body>
</html>

<head>

</head>

<body>

</body>

</html>

実行サンプル

【テキストボックス】
↓値が変更されるとフォーカスが外れた時点でイベントが発生します。

【セレクトボックス】
↓選択した内容が変わった時点でイベントが発生します。

【チェックボックス】
↓クリックして表示が変わる直前でイベントが発生します。

解説

value値が存在しないタグには、onchangeは設定できません。

執筆者：とら