input输入中文异常处理

引用：https://www.jianshu.com/p/c290ae8f6dfe

引入两个事件compositionstart和 compositionend。

关于oninput事件
oninput 是 HTML5 的标准事件,对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有用,在内容修改后立即被触发,不像 onchange 事件需要失去焦点才触发。 oninput 事件兼容为ie9+, ie下可以onpropertychange事件,不是本节内容。

compositionstart
当浏览器有非直接的文字输入时, compositionstart事件会以同步模式触发。
compositionend
当浏览器是直接的文字输入时, compositionend会以同步模式触发。
看了两个事件就明白,开始中文输入时会触发compositionstart事件选词结束后会触发compositionend事件,忽略这两个事件之间的input事件即可,为元素添加这个两个事件。

   $(function () {
        var cpLock = true;
        $('#textbox').off().on({
            compositionstart: function () {//中文输入开始
                  cpLock = false;
            },
            compositionend: function () {//中文输入结束
                cpLock = true;
            },
            input: function () {//input框中的值发生变化
                if (cpLock)
                    this.value = this.value.replace(/[^A-Za-z0-9]/g, '');
            }
        })
    });

添加一个 inputLock 变量，当用户未完成直接输入前，inputLock 为 false，不触发 input 事件中的逻辑，
当用户完成有效输入之后，inputLock 设置为 true，触发 input 事件的逻辑。
这里需要注意的一点是，compositionend 事件是在 input 事件后触发的，所以在 compositionend事件触发时，也要调用 input 事件处理逻辑。