composition事件控制表单输入字数的长度

我们在做表单内容输入的时候，常常会有一些字数长度限制，超过多少个字后不能再输入，在这种需求下，我们通常用input来判断字符串的length，然后做value的截取和重新赋值，但这样会有一个问题，就是当我们输入汉字的时候，每一个键盘按键都会触发input。比如表单里还可以输入两个字符，但我输入中文用的是拼音，全拼，要完成最后两个汉字的输入，需要按很多个字母键，但每一键都会因为input事件而截取value，导致最后两个汉字不能输入。

解决办法，使用composition来处理，有compositionstart和compositionend事件。

当我们打汉字的时候，是属于非直接输入的，这个时候我们还没完成一个字的输入，当我们按下空格键或者选择某个汉字词后才算真正的输入。

compositionstart事件在用户开始进行非直接输入的时候出触发，在非直接输入结束，也就是在用户点候选词或者点击选定按钮之后，会出发compositionend事件。

这样我们就可以在做字符限制的表单时，完美的控制字符数量的输入。

完整例子如下。

class InputLimit{
    constructor(el, maxLen){
        this.$el = el;
        this.maxLen = maxLen;
        this.inputLock = false;
        this.init();
    }
    init(){
        this.$el.addEventListener('compositionstart', () => {
            this.inputLock = true;
        });

        this.$el.addEventListener('compositionend', () => {
            this.inputLock = false;
            this.input();
        });

        this.$el.addEventListener('input', () => {
            this.inputLock || this.input();
        });
    }
    input(){
        let $el = this.$el;
        let maxLen = this.maxLen;
        if ($el.value.length > maxLen) {
            $el.value = $el.value.substr(0,maxLen);
        }
    }
}