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