成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

前端培訓(xùn)-初級(jí)階段-場(chǎng)景實(shí)戰(zhàn)（2019-05-30）-input 搜索如何防抖，如何處理中文輸入

BDEEFE / 409人閱讀

摘要：在掘金摸魚的時(shí)候看到了一個(gè)題第題搜索如何防抖，如何處理中文輸入，感覺(jué)挺有意思的。測(cè)試地址事件輸入法事件輸入法的第一個(gè)字母時(shí)觸發(fā)。輸入法狀態(tài)輸入內(nèi)容。輸入法選擇之后觸發(fā)。

前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS），本著提升技術(shù)水平，打牢基礎(chǔ)知識(shí)的中心思想，我們開課啦（每周四）。

場(chǎng)景實(shí)戰(zhàn)這塊內(nèi)容每個(gè)人的內(nèi)容都不一樣。所以最近的更新基本都是我遇到并解決掉的問(wèn)題。后期會(huì)把他們的內(nèi)容貼地址。

今天我們要講什么？

有的時(shí)候也不知道要寫點(diǎn)什么。在掘金摸魚的時(shí)候看到了一個(gè)題「第 79 題：input 搜索如何防抖，如何處理中文輸入」，感覺(jué)挺有意思的。今天我們就來(lái)說(shuō)一說(shuō)這些相關(guān)的知識(shí)

節(jié)流（throttle ）、去抖（debounce ）

input 標(biāo)簽支持的事件（和值相關(guān)的）

正題-搜索框-去抖-處理中文input時(shí)候的異常

節(jié)流（throttle ）、去抖（debounce ）

節(jié)流（throttle ）、去抖（debounce ），之前寫過(guò)，有現(xiàn)成的，我就不寫了。

input 標(biāo)簽支持的事件 鍵盤事件

keydown 事件
鍵盤按下事件

keypress 事件
按下產(chǎn)生字符值的鍵時(shí)會(huì)觸發(fā)。如字母、數(shù)字、標(biāo)點(diǎn)符號(hào)。不產(chǎn)生字符值的鍵的例子是修飾鍵如 Alt、Shift、Ctrl、backspace 等

keyup 事件
鍵盤彈起事件

值改變事件

change 事件
值改變事件，在失去焦點(diǎn)的時(shí)候判斷是否改變，如果改變了會(huì)觸發(fā)。
可以先輸入 123，然后改成 123456 這個(gè)時(shí)候把 456 刪除，就會(huì)發(fā)現(xiàn)并不會(huì)觸發(fā) change。測(cè)試地址-change事件

input 事件
值改變事件，在每次改變的時(shí)候觸發(fā)。
同上測(cè)試案例，會(huì)發(fā)現(xiàn)觸發(fā)了 9 次 input 事件。測(cè)試地址-input事件

輸入法事件

compositionstart
輸入法的第一個(gè)字母時(shí)觸發(fā)。進(jìn)去輸入法狀態(tài)

compositionupdate
輸入法的每次更新時(shí)觸發(fā)。輸入法狀態(tài)輸入內(nèi)容。

compositionend
輸入法選擇之后觸發(fā)。退出輸入法狀態(tài)

搜索框-去抖-處理中文input時(shí)候的異常

其實(shí)看到上面的那些邏輯我們就可以知道，compositionstart 是我們需要監(jiān)測(cè)的事件

事件觸發(fā)順序

進(jìn)入輸入法狀態(tài)：compositionstart=>compositionupdate=>input
輸入中：compositionupdate=>input
退出輸入法狀態(tài)：compositionupdate=>input=>compositionend

實(shí)現(xiàn)方案

觸發(fā)了 compositionupdate 就把下次 input 拋棄。compositionend 觸發(fā)一下 input 的事件;
測(cè)試地址-方案1，效果感覺(jué)很不錯(cuò)，去抖的話，給 demo5Console = debounce(demo5Console, 3000)。

compositionstart 的時(shí)候改掉 value，當(dāng)然這個(gè)方案沒(méi)成功，因?yàn)闀?huì)導(dǎo)致輸入框都沒(méi)了。

總結(jié)一下

在PC端有輸入的時(shí)候我們需要通過(guò) compositionupdate 來(lái)糾正輸入框的內(nèi)容。

為什么不說(shuō)移動(dòng)端呢？因?yàn)槲疫€沒(méi)測(cè)試。。。

后記 參考資料

事件參考 - MDN

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/53930.html

相關(guān)文章

  • 前端培訓(xùn)-初級(jí)階段-場(chǎng)景實(shí)戰(zhàn)（2019-05-30）-input 搜索如何防抖，如何處理中文輸入

    摘要：在掘金摸魚的時(shí)候看到了一個(gè)題第題搜索如何防抖，如何處理中文輸入，感覺(jué)挺有意思的。測(cè)試地址事件輸入法事件輸入法的第一個(gè)字母時(shí)觸發(fā)。輸入法狀態(tài)輸入內(nèi)容。輸入法選擇之后觸發(fā)。 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS），本著提升技術(shù)水平，打牢基礎(chǔ)知識(shí)的中心思想，我...

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

  • 前端培訓(xùn)-初級(jí)階段-場(chǎng)景實(shí)戰(zhàn)（2019-06-13）-Nginx代理正確食用方式

    摘要：前端最基礎(chǔ)的就是。我這邊預(yù)期準(zhǔn)備進(jìn)入中級(jí)階段，中間還是會(huì)穿插一些實(shí)戰(zhàn)。語(yǔ)法精確匹配，匹配成功，則停止搜索正則不能有嵌套的。指令會(huì)根據(jù)在配置文件中出現(xiàn)的順序依次執(zhí)行，可以使用來(lái)終止接下來(lái)的處理。如果以或者或者，則停止處理，立刻重定向。 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTM...

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

  • 前端培訓(xùn)-初級(jí)階段-場(chǎng)景實(shí)戰(zhàn)（2019-06-13）-Nginx代理正確食用方式

    摘要：前端最基礎(chǔ)的就是。我這邊預(yù)期準(zhǔn)備進(jìn)入中級(jí)階段，中間還是會(huì)穿插一些實(shí)戰(zhàn)。語(yǔ)法精確匹配，匹配成功，則停止搜索正則不能有嵌套的。指令會(huì)根據(jù)在配置文件中出現(xiàn)的順序依次執(zhí)行，可以使用來(lái)終止接下來(lái)的處理。如果以或者或者，則停止處理，立刻重定向。 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTM...

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

  • 2018大廠高級(jí)前端面試題匯總

    摘要：面試的公司分別是阿里網(wǎng)易滴滴今日頭條有贊挖財(cái)滬江餓了么攜程喜馬拉雅兌吧微醫(yī)寺庫(kù)寶寶樹海康威視蘑菇街酷家樂(lè)百分點(diǎn)和海風(fēng)教育。 （關(guān)注福利，關(guān)注本公眾號(hào)回復(fù)[資料]領(lǐng)取優(yōu)質(zhì)前端視頻，包括Vue、React、Node源碼和實(shí)戰(zhàn)、面試指導(dǎo)） 本人于7-8月開始準(zhǔn)備面試，過(guò)五關(guān)斬六將，最終抱得網(wǎng)易歸，深深感受到高級(jí)前端面試的套路。以下是自己整理的面試題匯總，不敢藏私，統(tǒng)統(tǒng)貢獻(xiàn)出來(lái)。 面試的公司分...

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

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<