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，本文原創，著作權歸作者所有，轉載請註明原鏈接及出處。

更多精彩文章，請掃下方二維碼關注我的公衆號