实时监控用户输入--中文输入解决方案

需求：对用户的输入进行实时监控，当用户输入的内容超出规定的字符长度时对用户输入进行截断并给予警告提示。

看到这一需求，第一想法就是对所需实时监控的input输入框绑定input/propertychange事件，而后在input/propertychange事件的处理函数中对用户实时输入内容进行长度判断。

实验发现，这种处理方式对于英文字符或者数字输入时效果完美，可是在输入中文时有bug。以下图所示，规定字符长度为5（此处不区分中英文），在中文输入时，用户尚未输入他想输入的中文，只是输入了几个拼音字符，但 input 事件也被触发了，提示长度超过上线！这并非咱们所但愿的！咱们但愿当用户输入中文，可以在用户将想输入的中文内容输入到input框再进行长度判断。

在网上找了解决方案时，发现了一些之前没听过的事件。

复合事件
复合事件（composition event）是DOM3级事件中新添加的一类事件，用于处理IME的输入序列。IME（Input Method Editor，输入法编辑器）能够让用户输入在物理键盘上找不到的字符。复合事件就是针对检测和处理这种输入而设计的。
（1）compositionstart：在IME的文本复合系统打开时触发，表示要开始输入了。
（2）compositionupdate：在向输入字段中插入新字符时触发。
（3）compositionend：在IME的文本复合系统关闭时触发，表示返回正常键盘的输入状态。

用这个事件，咱们能够实现中文输入法截断的问题了。代码以下：

此处要注意，在compositionend事件即输入结束时要去触发长度判断事件。
本文参考了http://coolmogu.com/2016/01/2...，感谢原文做者。