資訊專欄INFORMATION COLUMN
摘要：在探尋的過程中發(fā)現(xiàn)自己對鍵盤輸入事件的理解還并不到位，以至于有一些代碼看得云里霧里，趕緊查閱資料寫寫總結一下下文所說只在與里做了探究。短按觸發(fā)順序長按觸發(fā)順序循環(huán)事件阻止冒泡這類事件都會冒泡，阻止按照常規(guī)調用接口就可以阻止冒泡了。
前言
最近因一個需求在element-ui的Select組件文檔內找不到對應的示例，也就是filter-method方法的具體使用樣例，嘗試幾次之后也使用了一種辦法實現(xiàn)，但是感覺并不是最優(yōu)，于是嘗試看組件源碼來尋求結果。
在探尋的過程中發(fā)現(xiàn)自己對鍵盤輸入事件的理解還并不到位，以至于有一些代碼看得云里霧里，趕緊查閱資料寫寫demo總結一下(下文所說只在chrome與ff里做了探究)。
瀏覽器的鍵盤事件(keyboard event)
鍵盤事件主要有以下四類
keydown
keypress
keyup
input (盡在input與textarea里觸發(fā))
事件觸發(fā)順序
一開始我以為觸發(fā)順序看起來很easy 不就應該是keydown -> keypress -> input -> keyup這個順序，但實際情況里還有許多特殊情況。(如果不是在input與textarea里的則去掉input即可)
首先說一下，鍵盤上的鍵位可以分為2種類型
輸入型鍵位 0-9 a-z等等一切你要輸入字符的按鍵
功能性鍵位 Ctrl Command Shift等
這兩種類型在事件觸發(fā)順序上是有所差別的
輸入型鍵位
輕按一下快速彈起
keydown -> keypress -> input -> keyup
按住一段時間再彈起
在mac上測試的時候，搜狗輸入法以及自帶的拼音輸入法順序為 keydown -> (keypress -> input -> keydown -> keypress -> input ...循環(huán)) -> keyup，輸入框里輸入字符一直增加
然而切換到系統(tǒng)自帶的英文輸入法 keydown -> keypress -> input -> (keydown -> keydown -> ...循環(huán)) -> keyup，輸入框里輸入字符只有1個
注：僅在表單里不同輸入法可能表現(xiàn)不一致，如果window層面上的監(jiān)聽則表現(xiàn)一直，都為(keydown -> kewpress...循環(huán)) -> keyup
具體原因不詳，希望有大佬可以指出，感覺是輸入法底層實現(xiàn)的問題。但是我們可以看出，在input元素里，只有觸發(fā)keydown事件是無法成功在其中輸入值的
功能性鍵位
這類鍵位不會觸發(fā)keypress，其實在測試功能性鍵位的時候，我認為還可以具體分為2種鍵位
功能修飾性鍵位
如Ctrl, Command等，需要組合其他鍵位才能有效果，這類鍵位的長按與短按觸發(fā)順序都一致，為keydown -> keyup，
單功能性鍵位
如Ese 上下左右箭頭這種不需要組合的生效的鍵位。
短按觸發(fā)順序
keydown -> keyup
長按觸發(fā)順序
keydown -> keydown...循環(huán) -> keyup
事件阻止
冒泡
這4類事件都會冒泡，阻止按照常規(guī)調用Api接口就可以阻止冒泡了。
默認行為
鍵盤事件的默認行為就是輸入，那么已經(jīng)了解過了事件觸發(fā)順序，我們一定可以猜到，如果想阻止在input輸入框里輸入字符，我們可以在input事件之前阻止默認行為，即在keydown和keypress事件的時候調用e.preventDefault()即可阻止輸入，這個技巧也常用于輸入驗證的時候阻止一些超過次數(shù)的輸入。而在keydown里阻止默認行為的話，連keypress事件都不會觸發(fā)
input事件
如果你在input,textarea輸入框里輸入中文的時候，在ff與chrome有不同的事件觸發(fā)流程
chrome
沒有keypress事件的觸發(fā)
ff
僅觸發(fā)1次keydown，多次input和1次keyup
所以監(jiān)聽input事件就足夠了，參考百度搜索欄，我們可以實現(xiàn)一個搜索的提示性的功能，對中文還是很友好的。
何時獲取得到表單input的值通過上述知識，我們可以猜到只有在輸入框的值發(fā)生變化的時候才會觸發(fā)input事件，那么在input事件里必然可以精確的獲取到當前input的值，同理keyup更晚，一定可以獲取到。keydown,keypress事件觸發(fā)的時候，則無法獲取到input表單改變的最新值。
應用可以監(jiān)聽input對輸入內容作實時校驗
可以監(jiān)聽input對輸入內容作友好的提示
可以監(jiān)聽keydown對組合快捷鍵作相應，作一個出色的Web應用
可以阻止一些輸入的內容
后記感覺把input事件放到這里面不太合適，畢竟其他三個時間都是鍵盤事件，而input是專屬于表單值變化而觸發(fā)的事件。但是感覺一般的坑都在這里，所以就加進來了。
參考https://developer.mozilla.org/zh-CN/docs/Web/Events/keydown
https://developer.mozilla.org/zh-CN/docs/Web/Events/keyup
https://developer.mozilla.org/zh-CN/docs/Web/Events/keypress
https://developer.mozilla.org/zh-CN/docs/Web/Events/input
如果喜歡可以star一下，會不斷更新github地址
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/93870.html
摘要：前言見解有限，如有描述不當之處，請幫忙指出，如有錯誤，會及時修正。為什么要梳理這篇文章最近恰好被問到這方面的問題，嘗試整理后發(fā)現(xiàn)，這道題的覆蓋面可以非常廣，很適合作為一道承載知識體系的題目。 前言 見解有限，如有描述不當之處，請幫忙指出，如有錯誤，會及時修正。 為什么要梳理這篇文章？ 最近恰好被問到這方面的問題，嘗試整理后發(fā)現(xiàn)，這道題的覆蓋面可以非常廣，很適合作為一道承載知識體系的題目...
摘要：前言本文主要是有關前端方面知識按照目前的認知進行的收集歸類概括和整理，涵蓋前端理論與前端實踐兩方面。 前言：本文主要是有關前端方面知識按照 XX 目前的認知進行的收集、歸類、概括和整理，涵蓋『前端理論』與『前端實踐』兩方面。本文會告訴你前端需要了解的知識大致有什么，看上去有很多，但具體你要學什么，還是要 follow your heart & follow your BOSS。 初衷...
摘要：前言本文主要是有關前端方面知識按照目前的認知進行的收集歸類概括和整理，涵蓋前端理論與前端實踐兩方面。 前言：本文主要是有關前端方面知識按照 XX 目前的認知進行的收集、歸類、概括和整理，涵蓋『前端理論』與『前端實踐』兩方面。本文會告訴你前端需要了解的知識大致有什么，看上去有很多，但具體你要學什么，還是要 follow your heart & follow your BOSS。 初衷...
摘要：前言本文主要是有關前端方面知識按照目前的認知進行的收集歸類概括和整理，涵蓋前端理論與前端實踐兩方面。 前言：本文主要是有關前端方面知識按照 XX 目前的認知進行的收集、歸類、概括和整理，涵蓋『前端理論』與『前端實踐』兩方面。本文會告訴你前端需要了解的知識大致有什么，看上去有很多，但具體你要學什么，還是要 follow your heart & follow your BOSS。 初衷...
摘要：年求職面經(jīng)及總結我的求職之路差不多走到盡頭了感覺真是精疲力盡了把這大半年的經(jīng)歷和面試總結寫下來希望能給和我一樣在求職路上煎熬的人一點幫助先說背景微電子科學與工程專業(yè)學過兩門和相關的課程語言和單片機這個專業(yè)的唯一好處就是大部分人并不知道這個專 18年求職面經(jīng)及總結 我的求職之路差不多走到盡頭了,感覺真是精疲力盡了.把這大半年的經(jīng)歷和面試總結寫下來,希望能給和我一樣在求職路上煎熬的人一點幫...
閱讀 2655·2019-08-30 15:52
閱讀 3605·2019-08-29 17:02
閱讀 1851·2019-08-29 13:00
閱讀 929·2019-08-29 11:07
閱讀 3245·2019-08-27 10:53
閱讀 1776·2019-08-26 13:43
閱讀 1021·2019-08-26 10:22
閱讀 1349·2019-08-23 18:06
