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

一时失言乱红尘 2021-11-19 11:58 410阅读 0赞

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

方法调用：

<div>
        <input type="text" placeholder="请输入内容" id="on-input">
    </div>
    <div>
        <span>当前输入内容：</span>
        <span id="input-value"></span>
    </div>
    
    
    <script type="text/javascript">
        /* 插件调用 */
        $("#on-input").onInput(function (value) {
            $("#input-value").html(value);
        })
    </script>

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

> 作者：[黄河爱浪][Link 1] QQ：1846492969，邮箱：helang.love@qq.com
> 
> 微信公众号：web-7258，本文原创，著作权归作者所有，转载请注明原链接及出处。
> 
> 更多精彩文章，请扫下方二维码关注我的公众号
> 
> ![20190512094840637.jpg][]

[https_juejin.im_post_5caea6faf265da038145c338]: https://juejin.im/post/5caea6faf265da038145c338
[Link 1]: https://blog.csdn.net/u013350495
[20190512094840637.jpg]: /images/20211119/567b828a1c1f4c60bbd8854a09e2be22.png