GlobalEventHandlers.onchange

GlobalEventHandlers ミックスインの onchange プロパティは、change イベントを処理する EventHandler です。

change イベントはユーザーがフォームコントロールの値を変更した時に発生します。これは例えば、コントロールの外側をクリックしたり Tab キーで別のコントロールへ切り替えたりすることにより行われることがあります。

注記: oninput と異なり、onchange イベントハンドラーは、各要素の value が変化するたびに呼び出される必要がありません。

構文

target.onchange = functionRef;

functionRef は関数名または 関数式 です。この関数は、Event オブジェクトとその 1 個の引数を受け取ります。

この例は、<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 の定義
現行の標準

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
onchangeChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応

関連項目