成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

說(shuō)一說(shuō)限制字?jǐn)?shù)的輸入框踩的坑

luck / 2515人閱讀

摘要：所以最后犧牲了下用戶體驗(yàn)，找到了一個(gè)折中的方式輸入框失去焦點(diǎn)時(shí)即，或者用戶輸入回車鍵時(shí)才進(jìn)行內(nèi)容長(zhǎng)度的檢測(cè)。當(dāng)然如果發(fā)現(xiàn)輸入框內(nèi)容超過(guò)限制，要將光標(biāo)停留在輸入框內(nèi)，方便用戶進(jìn)行修改。

前言

最近產(chǎn)品需要做不少輸入框，產(chǎn)品想要的交互效果是：用戶可以輸入中英文，隨著用戶輸入能實(shí)時(shí)顯示已經(jīng)輸入的字符個(gè)數(shù)，當(dāng)超過(guò)數(shù)量限制時(shí)輸入框邊框變紅，同時(shí)給用戶提示信息。

這交互聽(tīng)起來(lái)沒(méi)啥問(wèn)題，技術(shù)實(shí)現(xiàn)上似乎也沒(méi)啥難點(diǎn)。但是當(dāng)我實(shí)現(xiàn)出來(lái)以后遇到中文輸入法就有坑了。

怎么個(gè)坑呢，且看下文~~

PS： 本文所有實(shí)驗(yàn)相關(guān)代碼都在 jsbin 中：https://jsbin.com/bolugo/edit...，大家可以訪問(wèn)此鏈接自行進(jìn)行實(shí)驗(yàn)。
實(shí)時(shí)監(jiān)測(cè)輸入框內(nèi)容長(zhǎng)度所遇到的坑 使用 oninput事件來(lái)監(jiān)聽(tīng)

使用這個(gè)oninput事件的好處有2個(gè)：

當(dāng)用戶通過(guò)右鍵復(fù)制改變輸入框內(nèi)容時(shí)，可以監(jiān)聽(tīng)到；

只有在輸入框內(nèi)容發(fā)生變化時(shí)才會(huì)觸發(fā)此事件，比如用戶按下方向鍵、control/shift 等這些控制字符鍵時(shí)此事件是不會(huì)觸發(fā)的；

當(dāng)你輸入英文字符或者數(shù)字時(shí)效果完美，甚至在你正常輸入中文時(shí)也效果完美。但當(dāng)你非正常輸入中文時(shí)就出現(xiàn) bug 了。非正常輸入是怎樣的呢？看下面這張示例圖：

看到了嗎，在這種中文輸入方式下，其實(shí)用戶還沒(méi)有輸入他想輸入的中文，只是輸入了幾個(gè)拼音，但 input 事件被觸發(fā)了，而且監(jiān)聽(tīng)到的輸入框value居然是d"d"d，不單單是拼音字符，還包括了分隔的點(diǎn)。假如輸入框內(nèi)容長(zhǎng)度被限制為不超過(guò)5，那么在截圖這種情況下，就會(huì)提示用戶字符長(zhǎng)度超過(guò)限制！。這樣的交互效果當(dāng)然不是產(chǎn)品想要的。

使用onkeydown/onkeypress/onkeyup事件來(lái)監(jiān)聽(tīng)

這幾個(gè)事件的缺點(diǎn)是無(wú)法監(jiān)聽(tīng)右鍵復(fù)制而來(lái)的輸入內(nèi)容，但是否也會(huì)存在與input事件一樣的問(wèn)題呢？

我做了幾個(gè)實(shí)驗(yàn)，發(fā)現(xiàn)keydown、keyup都會(huì)遇到和 input一樣的問(wèn)題，但keypress沒(méi)有這個(gè)問(wèn)題，因?yàn)樵谥形妮斎霠顟B(tài)下，keypress不會(huì)觸發(fā)，不單是你輸入拼音的過(guò)程中不會(huì)觸發(fā)，等你選中所要輸入的中文如“對(duì)對(duì)對(duì)”后也不會(huì)觸發(fā)。那么當(dāng)輸入“對(duì)對(duì)對(duì)”后雖然超過(guò)了字符限制但無(wú)法給出字符長(zhǎng)度超過(guò)限制！的提示。

折中解決方法

要想做到實(shí)時(shí)監(jiān)測(cè)內(nèi)容長(zhǎng)度，又想保證中文輸入法狀態(tài)下沒(méi)有 bug，我折騰了好久最后發(fā)現(xiàn) 臣妾做不到呀！（要是哪位豪杰找到了，一定要告訴我呀~~）。

所以最后犧牲了下用戶體驗(yàn)，找到了一個(gè)折中的方式：輸入框失去焦點(diǎn)時(shí)（即blur），或者用戶輸入回車鍵時(shí)才進(jìn)行內(nèi)容長(zhǎng)度的檢測(cè)。當(dāng)然如果發(fā)現(xiàn)輸入框內(nèi)容超過(guò)限制，要將光標(biāo)停留在輸入框內(nèi)，方便用戶進(jìn)行修改。

哎，一說(shuō)到用戶輸入回車鍵時(shí)才進(jìn)行內(nèi)容長(zhǎng)度的檢測(cè)又得說(shuō)說(shuō)以前栽的坑了

輸入框中如何檢測(cè)輸入了回車鍵

其實(shí)這是一個(gè)很常見(jiàn)的交互，比如修改名稱時(shí)支持用戶輸入回車后直接保存、登錄時(shí)支持用戶輸入回車后直接登錄。但其中要小心的坑是：**中文輸入法下按回車鍵來(lái)輸入英文字符**。

中文輸入法下按回車鍵來(lái)輸入英文字符的過(guò)程舉例：


比如我要輸入賬號(hào)進(jìn)行登錄，我的賬號(hào)是全英文的，我當(dāng)前處于中文輸入法，但我懶得切換輸入法，于是我就直接敲了我的賬號(hào)（全英文字符），這時(shí)搜狗輸入法給我提示了一大串中文，然后我按了個(gè)回車，輸入框就輸入了我想要的英文字符。

在這種情況下，用戶雖然輸入了回車鍵，但用戶按下回車鍵只是想在中文輸入法下輸入英文字符而已，這個(gè)回車鍵并不是我們想要監(jiān)聽(tīng)的回車鍵。那么怎么排除這種情況下的回車鍵呢？

一般來(lái)說(shuō)監(jiān)聽(tīng)回車鍵我們會(huì)用keydown事件或者keyup事件，實(shí)現(xiàn)代碼如下所示。那么是否這兩種方法都能過(guò)濾掉我們不想監(jiān)聽(tīng)的回車鍵呢？

//方法一：使用 keydown 事件
input.onkeydown = function(e){
  if(e.keyCode == 13){
    //用戶輸入的是回車鍵
    //做相關(guān)操作
  }
}
//方法二：使用 keyup 事件
input.onkeyup = function(e){
  if(e.keyCode == 13){
    //用戶輸入的是回車鍵
    //做相關(guān)操作
  }
}

經(jīng)過(guò)試驗(yàn)發(fā)現(xiàn)：使用keydown是可以成功過(guò)濾的，但使用keyup不能。

那么我們來(lái)看看為什么？

是因?yàn)樵?b>keydown事件中：中文輸入法狀態(tài)下輸入的回車鍵，檢測(cè)的 keyCode為 229 而不是13；單純輸入一個(gè)回車時(shí)，keyCode才是13。
而在keyup事件中：中文輸入法狀態(tài)下輸入的回車鍵，檢測(cè)的 keyCode是13；單純輸入一個(gè)回車時(shí)，keyCode也是13。
下圖是我打印在 console 中的結(jié)果：(代碼示例見(jiàn)這里)

結(jié)語(yǔ)

關(guān)于輸入框涉及到的幾個(gè)事件：keydown/keyup/keypress/input/change 的更多介紹，我多帶帶再寫一篇博客再講吧~~~

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/87837.html

相關(guān)文章

  • 說(shuō)一說(shuō)“換行”踩的坑

    摘要：雖然效果一樣，但是這兩種換行的方式使用起來(lái)卻不同。使用換行這種方式用起來(lái)比較坑，所以本文章的重點(diǎn)就是這一部分。因?yàn)橹爸缽椏蛑幸獙?shí)現(xiàn)換行，只能通過(guò)的方式，而不能通過(guò)的方式。在元素上使用等方式，發(fā)現(xiàn)都是可以實(shí)現(xiàn)換行的。 前言 最近遇到這樣一個(gè)需求：需要在頁(yè)面中顯示一段第三方文本信息。這些文本完全由第三方自己定義，我們負(fù)責(zé)顯示在頁(yè)面即可，第三方要求這些文本需要換行顯示即可。 我們都知道在...

    objc94 評(píng)論0 收藏0

  • 總結(jié)開(kāi)發(fā)過(guò)程踩到的坑（三）

    摘要：本文章旨在總結(jié)開(kāi)發(fā)過(guò)程中碰到的容易忘記或者比較重要的坑，一方面加深自己對(duì)于該部分的理解，另一方面希望能夠分享給大家，知識(shí)在于分享，當(dāng)然踩過(guò)的坑也不例外滑稽。 在日常工作中，時(shí)常會(huì)碰到各種各樣的坑，有時(shí)真的覺(jué)得很多時(shí)候開(kāi)發(fā)的經(jīng)驗(yàn)都是踩坑踩出來(lái)的。在通往大牛的道路上，希望自己能夠跨越重重阻礙，越走越遠(yuǎn)。學(xué)會(huì)時(shí)?？偨Y(jié)，不斷提升自己。 本文章旨在總結(jié)開(kāi)發(fā)過(guò)程中碰到的容易忘記或者比較重要的坑，...

    April 評(píng)論0 收藏0

  • 總結(jié)開(kāi)發(fā)過(guò)程踩到的坑（三）

    摘要：本文章旨在總結(jié)開(kāi)發(fā)過(guò)程中碰到的容易忘記或者比較重要的坑，一方面加深自己對(duì)于該部分的理解，另一方面希望能夠分享給大家，知識(shí)在于分享，當(dāng)然踩過(guò)的坑也不例外滑稽。 在日常工作中，時(shí)常會(huì)碰到各種各樣的坑，有時(shí)真的覺(jué)得很多時(shí)候開(kāi)發(fā)的經(jīng)驗(yàn)都是踩坑踩出來(lái)的。在通往大牛的道路上，希望自己能夠跨越重重阻礙，越走越遠(yuǎn)。學(xué)會(huì)時(shí)?？偨Y(jié)，不斷提升自己。 本文章旨在總結(jié)開(kāi)發(fā)過(guò)程中碰到的容易忘記或者比較重要的坑，...

    daryl 評(píng)論0 收藏0

  • 總結(jié)開(kāi)發(fā)過(guò)程踩到的坑（三）

    摘要：本文章旨在總結(jié)開(kāi)發(fā)過(guò)程中碰到的容易忘記或者比較重要的坑，一方面加深自己對(duì)于該部分的理解，另一方面希望能夠分享給大家，知識(shí)在于分享，當(dāng)然踩過(guò)的坑也不例外滑稽。 在日常工作中，時(shí)常會(huì)碰到各種各樣的坑，有時(shí)真的覺(jué)得很多時(shí)候開(kāi)發(fā)的經(jīng)驗(yàn)都是踩坑踩出來(lái)的。在通往大牛的道路上，希望自己能夠跨越重重阻礙，越走越遠(yuǎn)。學(xué)會(huì)時(shí)?？偨Y(jié)，不斷提升自己。 本文章旨在總結(jié)開(kāi)發(fā)過(guò)程中碰到的容易忘記或者比較重要的坑，...

    youkede 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<