資訊專欄INFORMATION COLUMN
摘要：需求對用戶的輸入進行實時監(jiān)控，當用戶輸入的內(nèi)容超出規(guī)定的字符長度時對用戶輸入進行截斷并給予警告提示。實驗發(fā)現(xiàn)，這種處理方式對于英文字符或者數(shù)字輸入時效果完美，但是在輸入中文時有。用這個事件，我們可以實現(xiàn)中文輸入法截斷的問題了。
需求：對用戶的輸入進行實時監(jiān)控，當用戶輸入的內(nèi)容超出規(guī)定的字符長度時對用戶輸入進行截斷并給予警告提示。
看到這一需求，第一想法就是對所需實時監(jiān)控的input輸入框綁定input/propertychange事件，然后在input/propertychange事件的處理函數(shù)中對用戶實時輸入內(nèi)容進行長度判斷。
實驗發(fā)現(xiàn)，這種處理方式對于英文字符或者數(shù)字輸入時效果完美，但是在輸入中文時有bug。如下圖所示，規(guī)定字符長度為5（此處不區(qū)分中英文），在中文輸入時，用戶還沒有輸入他想輸入的中文，只是輸入了幾個拼音字符，但 input 事件也被觸發(fā)了，提示長度超過上線！這并不是我們所希望的！我們希望當用戶輸入中文，能夠在用戶將想輸入的中文內(nèi)容輸入到input框再進行長度判斷。
在網(wǎng)上找了解決方案時，發(fā)現(xiàn)了一些以前沒聽過的事件。
復合事件
復合事件（composition event）是DOM3級事件中新添加的一類事件，用于處理IME的輸入序列。IME（Input Method Editor，輸入法編輯器）可以讓用戶輸入在物理鍵盤上找不到的字符。復合事件就是針對檢測和處理這種輸入而設(shè)計的。
（1）compositionstart：在IME的文本復合系統(tǒng)打開時觸發(fā)，表示要開始輸入了。
（2）compositionupdate：在向輸入字段中插入新字符時觸發(fā)。
（3）compositionend：在IME的文本復合系統(tǒng)關(guān)閉時觸發(fā)，表示返回正常鍵盤的輸入狀態(tài)。
用這個事件，我們可以實現(xiàn)中文輸入法截斷的問題了。代碼如下：
此處要注意，在compositionend事件即輸入結(jié)束時要去觸發(fā)長度判斷事件。
本文參考了http://coolmogu.com/2016/01/2...，感謝原文作者。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/80926.html
摘要：實時監(jiān)控實時監(jiān)控包括四部分帶寬監(jiān)控請求數(shù)監(jiān)控命中率監(jiān)控和狀態(tài)碼監(jiān)控。并統(tǒng)計該時間段內(nèi)選中域名的請求數(shù)峰值請求數(shù)谷值以及總請求數(shù)。狀態(tài)碼監(jiān)控該頁面下，將展示篩選條件下的狀態(tài)碼折線圖。實時監(jiān)控實時監(jiān)控包括四部分：帶寬監(jiān)控、請求數(shù)監(jiān)控、命中率監(jiān)控和HTTP狀態(tài)碼監(jiān)控。點擊進入實時監(jiān)控頁面。選擇需要查看監(jiān)控的域名列表，可單選、多選、全選。系統(tǒng)默認展示最近一天的監(jiān)控情況，也可根據(jù)需求選擇時長。篩選條件...
摘要：一需求闡述和常用的解決方案制作一個文本框限制最大字數(shù)，實時監(jiān)聽當前已經(jīng)輸入的字數(shù)，并顯示出來。因此單純的監(jiān)聽事件顯示是不夠的。如果頁面里需要多個文本框都要限制字數(shù)如何實現(xiàn)。 一、需求闡述和常用的解決方案 制作一個文本框限制最大字數(shù)，實時監(jiān)聽當前已經(jīng)輸入的字數(shù)，并顯示出來。期初我實現(xiàn)這個功能的方法很簡單：給textarea控件添加onkeyup事件方法，在方法中將textarea值的長度...
摘要：所以最后犧牲了下用戶體驗，找到了一個折中的方式輸入框失去焦點時即，或者用戶輸入回車鍵時才進行內(nèi)容長度的檢測。當然如果發(fā)現(xiàn)輸入框內(nèi)容超過限制，要將光標停留在輸入框內(nèi)，方便用戶進行修改。 前言 最近產(chǎn)品需要做不少輸入框，產(chǎn)品想要的交互效果是：用戶可以輸入中英文，隨著用戶輸入能實時顯示已經(jīng)輸入的字符個數(shù)，當超過數(shù)量限制時輸入框邊框變紅，同時給用戶提示信息。 這交互聽起來沒啥問題，技術(shù)實現(xiàn)上似...
閱讀 2410·2021-11-12 10:34
閱讀 1479·2019-08-29 16:15
閱讀 2691·2019-08-29 15:17
閱讀 1352·2019-08-23 17:09
閱讀 396·2019-08-23 11:37
閱讀 2457·2019-08-23 10:39
閱讀 476·2019-08-22 16:43
閱讀 3119·2019-08-22 14:53
