inputイベントのブラウザの対応が意外と進んでいる？

DOM Firefox Opera Safari
  • inputイベントはWeb Forms 2.0の草案で定義されているイベントで、フォームコントロールに入力されている値がユーザの入力によって変更されたときに発生するイベント
    • changeイベントと違ってフォーカスが外れることがイベント発生条件ではない
    • キャレットを動かしただけ、などの場合は入力による変更がないのでイベントは発生しない
    • キーボード入力だけが対象というわけではないのでコピー&ペーストやドラッグ&ドロップなどで入力がされた場合でもイベントが発生する、かもしれない
  • テキスト入力欄上であれば、試した限りではFirefox(2.0.0.14 - 3 beta 5), Opera(9.0 - 9.5 beta 2), Safari(3.1) (windows)で一応使える

テスト

<!DOCTYPE html>
<html><head><title>input event test</title>
<script type="text/javascript">
function log(value){
  var count = document.getElementById("count");
  count.firstChild.data = +count.firstChild.data + 1;
  var log = document.getElementById("log");
  var logtext = (log.firstChild || log.appendChild(document.createTextNode("")));
  logtext.data += value + "\n";
}
</script></head><body>
<h1>input event test</h1>
<p>Input: <input type="text" oninput="log(value)"></p>
<p>Count: <span id="count">0</span></p>
<pre id="log"></pre>
</body></html>
  • DOM Eventsのtarget.addEventListener("input", ...);でも可
  • このテストの場合、IEではonpropertychange="if (event.propertyName=='value') log(value)"などとして擬似的な対応が出来る、かもしれない