jQuery 监听输入框输入（兼容IE8）

因 IE9 以下版本的浏览器不兼容 oninput 事件，所以经常使用 keyup + change 的组合事件来完成，但是体验有所欠缺。

其实 IE 早已有与 oninput 事件相同功能的事件 onpropertychange。

方法封装：

/* 对象级别插件扩展 */
$.fn.extend({
    onInput:function (callback) {
        var el=$(this);
        /* 当前浏览器是否支持 oninput 事件 */
        if("oninput" in el.get(0)){
            el.on("input",function () {
                callback && callback($(this).val());
            });
        }else {
            /* IE独有属性，IE9 以下版本使用 */
            el.on("propertychange",function () {
                callback && callback($(this).val());
            });
        }
    }
});

方法调用：

<!-- HTML -->
<div>
    <input type="text" placeholder="请输入内容" id="on-input">
</div>
<div>
    <span>当前输入内容：</span>
    <span id="input-value"></span>
</div>

<!-- javascript -->
<script type="text/javascript">
    /* 插件调用 */
    $("#on-input").onInput(function (value) {
        $("#input-value").html(value);
    })
</script>

关于更多监听输入事件相关的知识，可阅读地址：https://juejin.im/post/5caea6faf265da038145c338 的这篇文章

作者：黄河爱浪 QQ：1846492969，邮箱：[email protected]

微信公众号：web-7258，本文原创，著作权归作者所有，转载请注明原链接及出处。

更多精彩文章，请扫下方二维码关注我的公众号