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

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

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

          

 

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

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

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

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

最新評(píng)論