onchange属性

Updated / Published

onchange属性はフォームのコントロール部品（input要素, select要素, textarea要素）の属性値が変更されたときに起動するスクリプトを指定するイベント属性（イベントハンドラ）です。

バージョン
  • HTML4.01(S,T,F)
  • XHTML1.0(S,T,F)
  • XHTML1.1
必須
-
非推奨
-
属性値
スクリプト

指定された要素により、イベントの発生段階が異なります。select要素の場合は選択メニューが選択されるとすぐにイベントが発生します。input要素（type="text"）や textarea要素の場合はテキストの入力中にイベントが発生するのではなく、Enter を押して内容の変更を確定したとき、または変更後にテキスト入力欄からフォーカスを外したときにイベントが発生します（input要素は、テキスト入力欄のほかにも type="checkbox", type="radio", type="file" などのときにも使えます）。

onchange属性を指定できる要素型

I
S
T

onchange属性のサンプル

次のスクリプトは、select要素の選択時にonchange属性のイベントが発生し、選択された値にページの背景色を塗り替えることができます。

<script type="text/javascript">
function changeBgcolor() {
var body = document.getElementByTagName("body")[0]; 
var rgb = document.getElementById("rgb");
body.style.backgroundColor = "#"
+ rgb.rval.options[rgb.rval.selectedIndex].value
+ rgb.rval.options[rgb.rval.selectedIndex].value
+ rgb.gval.options[rgb.gval.selectedIndex].value
+ rgb.gval.options[rgb.gval.selectedIndex].value
+ rgb.bval.options[rgb.bval.selectedIndex].value
+ rgb.bval.options[rgb.bval.selectedIndex].value;
}></script>
......
<body>
<form id="rgb">
<table>
<tr><th>R</th><th>G</th><th>B</th></tr>
<tr><td>
<select onchange="changeBgcolor()" size="6" name="rval">
<option value="F" selected="selected">F</option><option value="C">C</option>
<option value="9">9</option><option value="6">6</option>
<option value="3">3</option><option value="0">0</option>
</select>
</td><td>
<select onchange="changeBgcolor()" size="6" name="gval">
<option value="F" selected="selected">F</option><option value="C">C</option>
<option value="9">9</option><option value="6">6</option>
<option value="3">3</option><option value="0">0</option>
</select>
</td><td>
<select onchange="changeBgcolor()" size="6" name="bval">
<option value="F" selected="selected">F</option><option value="C">C</option>
<option value="9">9</option><option value="6">6</option>
<option value="3">3</option><option value="0">0</option>
</select>
</td></tr>
</table>
</form>
</body>