GlobalEventHandlers.oninput

GlobalEventHandlers ミックスインの oninput プロパティは、<input><select><textarea> の各要素上の input イベントを処理する EventHandler です。これは、contenteditable または designMode が有効になっている要素上のイベントも扱います。

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

構文

target.oninput = functionRef;

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

この例は、<input> 要素のコンテンツを変更する度に、その文字数をログ出力します。

HTML

<input type="text" placeholder="ここに何か入力すると、その長さが分かります。" size="50">
<p id="log"></p>

JavaScript

let input = document.querySelector('input');
let log = document.getElementById('log');

input.oninput = handleInput;

function handleInput(e) {
  log.textContent = `フィールドの value は
      ${e.target.value.length} 文字の長さです。`;
}

実行結果

仕様

仕様書 策定状況 備考
HTML Living Standard
oninput の定義
現行の標準 初期定義

ブラウザー実装状況

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

凡例

完全対応  
完全対応

以下のリンクは、互換性の問題と修正についての議論です。古いブラウザーで動作させる場合に役立つでしょう:

関連項目