oninput事件

oninput是HTML5的标准事件,当<input>、<textarea>等元素的value属性值由输入设备改变时,就会触发input事件。现代浏览器基本都支持,对于IE6/7/8也有等同的onpropertychange事件可用。

博客园有一篇介绍“实时监听输入框值变化的完美方案”的文章,见原文,其实这并不完美的解决方案,原因是IE9虽然支持oninput事件,但支持的并不完美:对于 BACKSPACE / DEL / do CUT 等操作,IE9并不会触发oninput事件,见stackOverflow上的问答

二者结合一下,很容易写出一个完美的解决方案,下面是针对jQuery的插件写法:

;(function($) {
    var i = 0;
    var obj = {};
 
    $.fn.input = function(callback) {
        var elem = this;
        var fn = 'input' + i++;
        obj[fn] = function() {
            callback.call(elem, elem.val());
        }
 
        elem.bind('input', obj[fn]);
        elem.bind('propertychange', obj[fn]); // for IE6/7/8
 
        // Add events to listen for input in IE9, due to oninput in IE9 
        // doesn't fire when we hit BACKSPACE / DEL / CUT
        if (navigator.appName == 'Microsoft Internet Explorer' && navigator.appVersion.match(/9./i) == '9.') {
            elem.focus(function() {
                document.addEventListener('selectionchange', obj[fn], false);
            });
            elem.blur(function() {
                document.removeEventListener('selectionchange', obj[fn], false);
            });
        }
 
        return this;
    };
})(jQuery);

使用的时候,只需:

<input type="text" id="demo" />

$('#demo').input(function(val) {
    // do some things
});