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

Jingbin_ 發布于2019-08-20 12:20 / 1160人閱讀

摘要：需求對用戶的輸入進行實時監控，當用戶輸入的內容超出規定的字符長度時對用戶輸入進行截斷并給予警告提示。實驗發現，這種處理方式對于英文字符或者數字輸入時效果完美，但是在輸入中文時有。用這個事件，我們可以實現中文輸入法截斷的問題了。

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

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

云服務器 GPU云服務器輸入中文中文輸入用戶輸入禁止輸入中文

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80926.html

【云分發 UCDN】使用指南：實時監控，統計分析，內容管理和域名管理

摘要：實時監控實時監控包括四部分帶寬監控請求數監控命中率監控和狀態碼監控。并統計該時間段內選中域名的請求數峰值請求數谷值以及總請求數。狀態碼監控該頁面下，將展示篩選條件下的狀態碼折線圖。實時監控實時監控包括四部分：帶寬監控、請求數監控、命中率監控和HTTP狀態碼監控。點擊進入實時監控頁面。選擇需要查看監控的域名列表，可單選、多選、全選。系統默認展示最近一天的監控情況，也可根據需求選擇時長。篩選條件...

Tecode 2022-06-28 19:00 評論0 收藏0
兼顧pc和移動端的textarea字數監控的實現方法

摘要：一需求闡述和常用的解決方案制作一個文本框限制最大字數，實時監聽當前已經輸入的字數，并顯示出來。因此單純的監聽事件顯示是不夠的。如果頁面里需要多個文本框都要限制字數如何實現。一、需求闡述和常用的解決方案制作一個文本框限制最大字數，實時監聽當前已經輸入的字數，并顯示出來。期初我實現這個功能的方法很簡單：給textarea控件添加onkeyup事件方法，在方法中將textarea值的長度...

laznrbfe 2019-08-20 17:15 評論0 收藏0
說一說限制字數的輸入框踩的坑

摘要：所以最后犧牲了下用戶體驗，找到了一個折中的方式輸入框失去焦點時即，或者用戶輸入回車鍵時才進行內容長度的檢測。當然如果發現輸入框內容超過限制，要將光標停留在輸入框內，方便用戶進行修改。前言最近產品需要做不少輸入框，產品想要的交互效果是：用戶可以輸入中英文，隨著用戶輸入能實時顯示已經輸入的字符個數，當超過數量限制時輸入框邊框變紅，同時給用戶提示信息。這交互聽起來沒啥問題，技術實現上似...

luck 2019-08-21 14:16 評論0 收藏0