兄弟は良い:oninput&onpropertychange

2968 ワード

従来、テキストボックス(input)の入力は、キーボードのonkeydown/onkeypress/onkeyupによって監視されていたが、cut(せん断)/paste(コピー)/undo(取り消し)/redo(やり直し)/drag&drop(ドラッグ)/入力法など、詳細を処理する際に非難されていた.
oninput&onpropertychange事件は基本的に上の非難を解決することができます.
oninputイベントはHTML 5の標準イベントとして、基本的にIE 6/IE 7/IE 8を除く最新のブラウザでサポートされている(注:1、元のOperaはサポートされているが、依然として一部の伝統的な非難が存在し、Opera 11+から始まり、修復され、より完璧である;2、IE 9もサポートされている).
function(input, callback){     if ("onpropertychange" in input) { //IE6/IE7/IE8         input.onprepertychange = function(){             if (window.event.propertyName == "value"){                 callback.call(this, window.event)             }         }     } else {         // Fix Firefox Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=195696         input.addEventListener("input", callback, false);     } }

ヒント:
  • oninputイベント:JSがvalue値を変更したり、ブラウザの自動ドロップダウン・プロンプトから値を選択したりすると、トリガーされません.
  • onpropertychangeイベント:inputが使用不可(disable=true)に設定されている場合、トリガーされません.

  • 転記:http://www.kuqin.com/webpagedesign/20111018/313056.html