GlobalEventHandlers
ミックスインの onchange
プロパティは、change
イベントを処理する EventHandler
です。
change
イベントはユーザーがフォームコントロールの値を変更した時に発生します。これは例えば、コントロールの外側をクリックしたり Tab キーで別のコントロールへ切り替えたりすることにより行われることがあります。
注記: oninput
と異なり、onchange
イベントハンドラーは、各要素の value
が変化するたびに呼び出される必要がありません。
構文
例
この例は、<input>
要素のコンテンツを変更してフォーカスを要素から外す度に、その文字数をログ出力します。
HTML
<input type="text" placeholder="Type something here, then click outside of the field." size="50">
<p id="log"></p>
JavaScript
let input = document.querySelector('input');
let log = document.getElementById('log');
input.onchange = handleChange;
function handleChange(e) {
log.textContent = `The field's value is
${e.target.value.length} character(s) long.`;
}
実行結果
仕様
仕様書 | 策定状況 | 備考 |
---|---|---|
HTML Living Standard onchange の定義 |
現行の標準 |
ブラウザー実装状況
BCD tables only load in the browser
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
関連項目
change
イベント