哥俩好：oninput & onpropertychange

最新推荐文章于 2025-11-29 19:52:46 发布

转载最新推荐文章于 2025-11-29 19:52:46 发布 · 965 阅读

文章标签：

#input #callback #opera #function #浏览器 #firefox

javascript 专栏收录该内容

125 篇文章

订阅专栏

本文介绍了在处理文本框输入事件时，如何使用oninput和onpropertychange事件替代传统的键盘监听事件，以解决剪切、复制、撤销、重做、拖拽及输入法等问题。重点讨论了oninput事件在现代浏览器的支持情况以及onpropertychange事件的使用方法，包括其在特定浏览器环境下的兼容性处理。

传统对于文本框（input）的输入可通过键盘的 onkeydown / onkeypress / onkeyup 来监测，但在处理较多细节时存在诟病比如： cut（剪切） / paste（复制） / undo（撤销） / redo（重做） / drag & drop（拖拽）/ 输入法等。

而 oninput & onpropertychange 事件基本可以解决上面的诟病：

oninput 事件作为 HTML5 中的标准事件，基本除了IE6 / IE7 / IE8 外的最新浏览器均支持（注：1、原先的 Opera 的虽支持，但依然存在部分传统的诟病，从 Opera 11+ 开始，已修复，更加完美；2、IE9 也支持）。

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);
    }
}