GlobalEventHandlers.oninput

GlobalEventHandlers ミックスインの oninput プロパティは、<input><select><textarea> の各要素上の input イベントを処理する event handler です。これは、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 の定義
現行の標準 初期定義

ブラウザー実装状況

BCD tables only load in the browser

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

関連項目