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

重要的鍵盤事件：
事件順序：keydown -> keypress ->keyup
對(duì)于輸入法開(kāi)啟時(shí)：
keypress：
這三個(gè)事件中最最特別的事件的說(shuō),如果巧妙運(yùn)用可以事半功倍：
1. 首先對(duì)于大部分功能鍵是沒(méi)有keypress事件的
Caps lock ，shift，alt，ctrl，num lock、、、慶幸的是enter擁有此事件
2. 對(duì)于字母，數(shù)字，press返回的keyCode是不可靠的
在IE和webkit 下 返回的是ASCII code
firfox下永遠(yuǎn)返回0
但是 對(duì)于keyUP keyDOWN事件 鍵值是完全統(tǒng)一的
3. KeyPress 只能捕獲單個(gè)字符
KeyDown 和KeyUp可以捕獲組合鍵。故可能涉及組合鍵的功能需要綁定在down up事件上
對(duì)于中文輸入法開(kāi)啟時(shí)個(gè)瀏覽器對(duì)事件的不同相應(yīng)以及解決方法：
在中文輸入法開(kāi)啟狀態(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的，前端可以通過(guò)模擬KEYCODE入輸入框?qū)崿F(xiàn)輸入法與輸入框的同步狀態(tài)，并觸發(fā)在輸入狀態(tài)時(shí)便同步suggestion。

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

那么如何檢測(cè)用戶在輸入后的一點(diǎn)呢？
通過(guò)配合上一個(gè)問(wèn)題中判斷出的keyUP事件 ，如果需要在輸入法出現(xiàn)時(shí)屏蔽事件，只要綁定到keypress事件便可以了
對(duì)suggestion的總結(jié)：
從開(kāi)始講起：
在suggestion的開(kāi)發(fā)中，最大的阻礙就是檢查用戶行為了，而這些用戶行為主要會(huì)聚在小小的輸入框上，對(duì)鍵盤事件的巧妙運(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 --下方向鍵
開(kāi)發(fā)中還遇到了一些小問(wèn)題,和彎路：
首先從思想上來(lái)個(gè)總結(jié)：
1. 錯(cuò)誤的思路：
之一：每次用戶敲擊鍵盤便發(fā)送請(qǐng)求
這無(wú)疑是就簡(jiǎn)單是方式，但是卻需要大量的AJAX，而且大部分是沒(méi)有展現(xiàn)機(jī)會(huì)的，好的前端代碼，應(yīng)該充分考慮到前后端交互中虛耗，最大程度上減少虛耗。
之二：每隔一段時(shí)間檢測(cè)輸入框內(nèi)容：
每隔一段時(shí)間邊執(zhí)行一次代碼，浪費(fèi)性能就不用說(shuō)什么了，最重要的是，這一機(jī)制不能很好的掌控用戶輸入事件與js檢測(cè)的先后順序，
檢測(cè)完畢如果正好發(fā)生在了用戶輸入之后，便會(huì)出現(xiàn)錯(cuò)誤。雖然可以用檢測(cè)當(dāng)前輸入框狀態(tài)來(lái)彌補(bǔ)，但是體驗(yàn)卻很差，而且虛耗了很多ajax請(qǐng)求。
2．優(yōu)化后的思路：
綁定在key敲擊事件后
第一種方式開(kāi)發(fā)完后，我發(fā)現(xiàn)在自測(cè)時(shí)，由于不能準(zhǔn)確監(jiān)控用戶行為的時(shí)間戳，導(dǎo)致了眾多bug，再一一修復(fù)后，一個(gè)更好的思路萌發(fā)了。
通過(guò)檢測(cè)key的敲擊事件，來(lái)判斷是否發(fā)送請(qǐng)求，并屏蔽連續(xù)敲擊事件。
具體思路：
當(dāng)用戶聚焦輸入框時(shí)，開(kāi)始監(jiān)控keydown事件，記入此時(shí)輸入框狀態(tài)，當(dāng)有keydown事件并輸入框能容改變—》100毫秒后檢測(cè)當(dāng)前輸入框狀態(tài)如果與之前不相符擇可向后端發(fā)送AJAX請(qǐng)求
這樣一來(lái)，根據(jù)用戶的輸入，輸入頻率，判斷ajax請(qǐng)求數(shù)，并通過(guò)閥值的限制，減少ajax請(qǐng)求。用戶輸入的多，js檢測(cè)的就多，ajax便多，用戶不動(dòng)，便沒(méi)有js檢測(cè)和ajax，輸入的慢則少，很好的減少了虛耗。

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