亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

Yuanf / 3483人閱讀

摘要：在掘金摸魚的時候看到了一個題第題搜索如何防抖，如何處理中文輸入，感覺挺有意思的。測試地址事件輸入法事件輸入法的第一個字母時觸發(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ǔ)知識的中心思想，我們開課啦（每周四）。

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

今天我們要講什么？

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

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

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

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

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

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

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

keydown 事件
鍵盤按下事件

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

keyup 事件
鍵盤彈起事件

值改變事件

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

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

輸入法事件

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

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

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

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

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

事件觸發(fā)順序

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

實現(xiàn)方案

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

compositionstart 的時候改掉 value，當(dāng)然這個方案沒成功，因為會導(dǎo)致輸入框都沒了。

總結(jié)一下

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

為什么不說移動端呢？因為我還沒測試。。。

后記 參考資料

事件參考 - MDN

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/109870.html

相關(guān)文章

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

    摘要：在掘金摸魚的時候看到了一個題第題搜索如何防抖，如何處理中文輸入，感覺挺有意思的。測試地址事件輸入法事件輸入法的第一個字母時觸發(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ǔ)知識的中心思想，我...

    BDEEFE 評論0 收藏0

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

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

    Harpsichord1207 評論0 收藏0

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

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

    seanHai 評論0 收藏0

  • 2018大廠高級前端面試題匯總

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

    zzir 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<