suggestion開發(fā)小結(jié)以及對鍵盤事件的總結(jié)（針對中文輸入法狀態(tài)）_javascript技巧

重要的鍵盤事件：
事件順序：keydown -> keypress ->keyup
對于輸入法開啟時：
keypress：
這三個事件中最最特別的事件的說,如果巧妙運用可以事半功倍：
1. 首先對于大部分功能鍵是沒有keypress事件的
Caps lock ，shift，alt，ctrl，num lock、、、慶幸的是enter擁有此事件
2. 對于字母，數(shù)字，press返回的keyCode是不可靠的
在IE和webkit 下 返回的是ASCII code
firfox下永遠返回0
但是 對于keyUP keyDOWN事件 鍵值是完全統(tǒng)一的
3. KeyPress 只能捕獲單個字符
KeyDown 和KeyUp可以捕獲組合鍵。故可能涉及組合鍵的功能需要綁定在down up事件上
對于中文輸入法開啟時個瀏覽器對事件的不同相應(yīng)以及解決方法：
在中文輸入法開啟狀態(tài)下：
Firefox：當(dāng)點擊字母鍵時，會觸發(fā)這樣的事情：

為什么叫做虛擬失焦呢： 這種狀態(tài)下并未真正觸發(fā)失焦?fàn)顟B(tài)，但是卻屏蔽了所有輸入框綁定的鍵盤事件

IE，webkit ： 但用戶點擊字母鍵，又會發(fā)生這樣的事情

啟發(fā)： 由于在這種狀態(tài)下 是可以捕捉keyup,keydown從而捕捉KEYCODE的，前端可以通過模擬KEYCODE入輸入框?qū)崿F(xiàn)輸入法與輸入框的同步狀態(tài)，并觸發(fā)在輸入狀態(tài)時便同步suggestion。

那么如何避免，在輸入法運行時用戶在敲擊回車鍵，觸發(fā)回車鍵原來的事件呢？
看了上面兩個圖，這么一來便很簡單了 -------keyPress事件綁定原來的事件，如觸發(fā)搜索等
keyup綁定 在輸入法運行時，回車，空格等需要觸發(fā)的事件，亦可以用來檢測退出搜索框

那么如何檢測用戶在輸入后的一點呢？
通過配合上一個問題中判斷出的keyUP事件 ，如果需要在輸入法出現(xiàn)時屏蔽事件，只要綁定到keypress事件便可以了
對suggestion的總結(jié)：
從開始講起：
在suggestion的開發(fā)中，最大的阻礙就是檢查用戶行為了，而這些用戶行為主要會聚在小小的輸入框上，對鍵盤事件的巧妙運用，可以減少代碼量，提升性能，最大程度上優(yōu)化用戶體驗。

主要的用戶行為總結(jié)如下：
1.改變輸入內(nèi)容（增加，刪除，粘貼）--其中，最重要的便是連續(xù)輸入了
2.敲擊功能鍵--主要key值為：
keyCode ：13 --回車鍵
keyCode ：27 --esc鍵
keyCode : 38--上方向鍵 -->webkit內(nèi)核下會自動定位到首部，記得要preventDefault哦~
keyCode ：40 --下方向鍵
開發(fā)中還遇到了一些小問題,和彎路：
首先從思想上來個總結(jié)：
1. 錯誤的思路：
之一：每次用戶敲擊鍵盤便發(fā)送請求
這無疑是就簡單是方式，但是卻需要大量的AJAX，而且大部分是沒有展現(xiàn)機會的，好的前端代碼，應(yīng)該充分考慮到前后端交互中虛耗，最大程度上減少虛耗。
之二：每隔一段時間檢測輸入框內(nèi)容：
每隔一段時間邊執(zhí)行一次代碼，浪費性能就不用說什么了，最重要的是，這一機制不能很好的掌控用戶輸入事件與js檢測的先后順序，
檢測完畢如果正好發(fā)生在了用戶輸入之后，便會出現(xiàn)錯誤。雖然可以用檢測當(dāng)前輸入框狀態(tài)來彌補，但是體驗卻很差，而且虛耗了很多ajax請求。
2．優(yōu)化后的思路：
綁定在key敲擊事件后
第一種方式開發(fā)完后，我發(fā)現(xiàn)在自測時，由于不能準確監(jiān)控用戶行為的時間戳，導(dǎo)致了眾多bug，再一一修復(fù)后，一個更好的思路萌發(fā)了。
通過檢測key的敲擊事件，來判斷是否發(fā)送請求，并屏蔽連續(xù)敲擊事件。
具體思路：
當(dāng)用戶聚焦輸入框時，開始監(jiān)控keydown事件，記入此時輸入框狀態(tài)，當(dāng)有keydown事件并輸入框能容改變—》100毫秒后檢測當(dāng)前輸入框狀態(tài)如果與之前不相符擇可向后端發(fā)送AJAX請求
這樣一來，根據(jù)用戶的輸入，輸入頻率，判斷ajax請求數(shù)，并通過閥值的限制，減少ajax請求。用戶輸入的多，js檢測的就多，ajax便多，用戶不動，便沒有js檢測和ajax，輸入的慢則少，很好的減少了虛耗。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com