資訊專欄INFORMATION COLUMN
摘要：在掘金摸魚的時候看到了一個題第題搜索如何防抖，如何處理中文輸入，感覺挺有意思的。測試地址事件輸入法事件輸入法的第一個字母時觸發。輸入法狀態輸入內容。輸入法選擇之后觸發。
前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本著提升技術水平，打牢基礎知識的中心思想，我們開課啦（每周四）。
場景實戰這塊內容每個人的內容都不一樣。所以最近的更新基本都是我遇到并解決掉的問題。后期會把他們的內容貼地址。
今天我們要講什么？有的時候也不知道要寫點什么。在掘金摸魚的時候看到了一個題「第 79 題：input 搜索如何防抖，如何處理中文輸入」，感覺挺有意思的。今天我們就來說一說這些相關的知識
節流（throttle ）、去抖（debounce ）
input 標簽支持的事件（和值相關的）
正題-搜索框-去抖-處理中文input時候的異常
節流（throttle ）、去抖（debounce ）節流（throttle ）、去抖（debounce ），之前寫過，有現成的，我就不寫了。
input 標簽支持的事件 鍵盤事件keydown 事件
鍵盤按下事件
keypress 事件
按下產生字符值的鍵時會觸發。如字母、數字、標點符號。不產生字符值的鍵的例子是修飾鍵如 Alt、Shift、Ctrl、backspace 等
keyup 事件
鍵盤彈起事件
change 事件
值改變事件，在失去焦點的時候判斷是否改變，如果改變了會觸發。
可以先輸入 123，然后改成 123456 這個時候把 456 刪除，就會發現并不會觸發 change。測試地址-change事件
input 事件
值改變事件，在每次改變的時候觸發。
同上測試案例，會發現觸發了 9 次 input 事件。測試地址-input事件
compositionstart
輸入法的第一個字母時觸發。進去輸入法狀態
compositionupdate
輸入法的每次更新時觸發。輸入法狀態輸入內容。
compositionend
輸入法選擇之后觸發。退出輸入法狀態
其實看到上面的那些邏輯我們就可以知道，compositionstart 是我們需要監測的事件
事件觸發順序進入輸入法狀態：compositionstart=>compositionupdate=>input
輸入中：compositionupdate=>input
退出輸入法狀態：compositionupdate=>input=>compositionend
觸發了 compositionupdate 就把下次 input 拋棄。compositionend 觸發一下 input 的事件;
測試地址-方案1，效果感覺很不錯，去抖的話，給 demo5Console = debounce(demo5Console, 3000)。
compositionstart 的時候改掉 value，當然這個方案沒成功，因為會導致輸入框都沒了。
在PC端有輸入的時候我們需要通過 compositionupdate 來糾正輸入框的內容。
為什么不說移動端呢？因為我還沒測試。。。
后記 參考資料事件參考 - MDN
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109870.html
摘要：在掘金摸魚的時候看到了一個題第題搜索如何防抖，如何處理中文輸入，感覺挺有意思的。測試地址事件輸入法事件輸入法的第一個字母時觸發。輸入法狀態輸入內容。輸入法選擇之后觸發。 前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本著提升技術水平，打牢基礎知識的中心思想，我...
摘要：前端最基礎的就是。我這邊預期準備進入中級階段，中間還是會穿插一些實戰。語法精確匹配，匹配成功，則停止搜索正則不能有嵌套的。指令會根據在配置文件中出現的順序依次執行，可以使用來終止接下來的處理。如果以或者或者，則停止處理，立刻重定向。 前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTM...
摘要：前端最基礎的就是。我這邊預期準備進入中級階段，中間還是會穿插一些實戰。語法精確匹配，匹配成功，則停止搜索正則不能有嵌套的。指令會根據在配置文件中出現的順序依次執行，可以使用來終止接下來的處理。如果以或者或者，則停止處理，立刻重定向。 前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTM...
摘要：面試的公司分別是阿里網易滴滴今日頭條有贊挖財滬江餓了么攜程喜馬拉雅兌吧微醫寺庫寶寶樹海康威視蘑菇街酷家樂百分點和海風教育。 （關注福利，關注本公眾號回復[資料]領取優質前端視頻，包括Vue、React、Node源碼和實戰、面試指導） 本人于7-8月開始準備面試，過五關斬六將，最終抱得網易歸，深深感受到高級前端面試的套路。以下是自己整理的面試題匯總，不敢藏私，統統貢獻出來。 面試的公司分...
閱讀 1456·2023-04-25 17:18
閱讀 1889·2021-10-27 14:18
閱讀 2129·2021-09-09 09:33
閱讀 1844·2019-08-30 15:55
閱讀 2020·2019-08-30 15:53
閱讀 3443·2019-08-29 16:17
閱讀 3432·2019-08-26 13:57
閱讀 1734·2019-08-26 13:46
