實時監控用戶輸入--中文輸入解決方案

需求：對用戶的輸入進行實時監控，當用戶輸入的內容超出規定的字符長度時對用戶輸入進行截斷並給予警告提示。

看到這一需求，第一想法就是對所需實時監控的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...，感謝原文做者。