實時監控使用者輸入 中文輸入解決方案

2021-09-17 22:31:50 字數 974 閱讀 5318

需求:對使用者的輸入進行實時監控,當使用者輸入的內容超出規定的字元長度時對使用者輸入進行截斷並給予警告提示。

看到這一需求,第一想法就是對所需實時監控的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事件即輸入結束時要去觸發長度判斷事件。

本文參考了感謝原文作者。

實時監控input輸入值變化

在web開發中,我們有時會需要動態監聽輸入框值的變化,當使用onkeydown onkeypress onkeyup作為監聽事件時,會發現一些複製貼上等操作用不了,同時,在處理組合快鍵鍵的時候也很麻煩。這時候我們需要更專業的解決方案 html5標準事件oninput onchange和ie專屬的事件...

cefsharp wpf 中文輸入問題解決方法

最近在用cefsharp wpf控制項來嵌入webkit瀏覽器核心。發現版本43,45都有個大問題,不能輸入中文。去官方github的搜尋了下,之前有人遇到過,並且解決了,不知道怎麼回事最新的 又把修復的部分給刪掉了.只好自己修改 然後編譯。增加 protected override void on...

sublime text3 輸入中文的解決方法

cd sublime text imfix 前提 解壓後的sublime text imfix必須在 目錄下 sudo cp lib libsublime imfix.so opt sublime text sudo cp src subl usr bin 3.最後把sublime都關掉,然後在終端...