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

最新推荐文章于 2020-12-22 11:10:42 发布

黄河爱浪

最新推荐文章于 2020-12-22 11:10:42 发布

阅读量1.2k

点赞数

分类专栏： jQuery 文章标签： oninput onpropertychange

本文链接：https://blog.csdn.net/u013350495/article/details/97526880

版权

jQuery 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

因 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 的这篇文章