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