用戶在使用鍵盤時(shí)會(huì)觸發(fā)鍵盤事件?！癉OM2 級(jí)事件”初規(guī)定了鍵盤事件，但在終定稿之前又 刪除了相應(yīng)的內(nèi)容。結(jié)果，對(duì)鍵盤事件的支持主要遵循的是 DOM0級(jí)。
? ? ? ? “DOM3級(jí)事件”為鍵盤事件制定了規(guī)范，IE9率先完全實(shí)現(xiàn)了該規(guī)范。其他瀏覽器也在著手實(shí)現(xiàn)這 一標(biāo)準(zhǔn)，但仍然有很多遺留的問題。 有 3個(gè)鍵盤事件，簡(jiǎn)述如下。?
? ? ? ? keydown：當(dāng)用戶按下鍵盤上的任意鍵時(shí)觸發(fā)，而且如果按住不放的話，會(huì)重復(fù)觸發(fā)此事件。?
? ? ? ? keypress：當(dāng)用戶按下鍵盤上的字符鍵時(shí)觸發(fā)，而且如果按住不放的話，會(huì)重復(fù)觸發(fā)此事件。
? ? ? ? 按下 Esc鍵也會(huì)觸發(fā)這個(gè)事件。Safari 3.1之前的版本也會(huì)在用戶按下非字符鍵時(shí)觸發(fā) keypress 事件。
? ? ? ?keyup：當(dāng)用戶釋放鍵盤上的鍵時(shí)觸發(fā)。
? ? ? ? 雖然所有元素都支持以上 3個(gè)事件，但只有在用戶通過文本框輸入文本時(shí)才常用到。?
? ? ? ?只有一個(gè)文本事件：textInput。這個(gè)事件是對(duì) keypress 的補(bǔ)充，用意是在將文本顯示給用戶之 前更容易攔截文本。在文本插入文本框之前會(huì)觸發(fā) textInput 事件。?
? ? ? ?在用戶按了一下鍵盤上的字符鍵時(shí)，首先會(huì)觸發(fā) keydown 事件，然后緊跟著是 keypress 事件， 后會(huì)觸發(fā) keyup 事件。其中，keydown 和 keypress 都是在文本框發(fā)生變化之前被觸發(fā)的；而 keyup 事件則是在文本框已經(jīng)發(fā)生變化之后被觸發(fā)的。如果用戶按下了一個(gè)字符鍵不放，就會(huì)重復(fù)觸發(fā) keydown 和 keypress 事件，直到用戶松開該鍵為止。 如果用戶按下的是一個(gè)非字符鍵，那么首先會(huì)觸發(fā) keydown 事件，然后就是 keyup 事件。
? ? ? ?如果按 住這個(gè)非字符鍵不放，那么就會(huì)一直重復(fù)觸發(fā) keydown 事件，直到用戶松開這個(gè)鍵，此時(shí)會(huì)觸發(fā) keyup 事件。 ? ? ? ?鍵盤事件與鼠標(biāo)事件一樣，都支持相同的修改鍵。而且，鍵盤事件的事件對(duì)象中 也有 shiftKey、ctrlKey、altKey 和 metaKey 屬性。IE不支持 metaKey。
? ? ? ?我們先來介紹下鍵碼 后面若不需要加班，南昌網(wǎng)站建設(shè)公司百恒網(wǎng)絡(luò)前端開發(fā)工程師會(huì)接著向大家介紹textInput,因?yàn)檫@是對(duì)keypress事件的補(bǔ)充。
? ? ? ?在發(fā)生 keydown 和 keyup 事件時(shí)，event 對(duì)象的 keyCode 屬性中會(huì)包含一個(gè)代碼，與鍵盤上一 個(gè)特定的鍵對(duì)應(yīng)。對(duì)數(shù)字字母字符鍵，keyCode 屬性的值與 ASCII 碼中對(duì)應(yīng)小寫字母或數(shù)字的編碼相 同。因此，數(shù)字鍵 7的 keyCode 值為 55，而字母 A鍵的 keyCode 值為 65——與 Shift鍵的狀態(tài)無關(guān)。 DOM和 IE的 event 對(duì)象都支持 keyCode 屬性。南昌網(wǎng)站制作公司百恒網(wǎng)絡(luò)前端工程師結(jié)合實(shí)例向大家介紹，請(qǐng)看下面這個(gè)例子：





? ? ? ?


? ? ? ?
? ? ? ?


? ? ? ?在這個(gè)例子中，用戶每次在文本框中按鍵觸發(fā) keyup 事件時(shí)，都會(huì)顯示 keyCode 的值。下表列出 了所有非字符鍵的鍵碼。?
鍵 鍵 碼 鍵 鍵 碼
退格（Backspace） 8 數(shù)字小鍵盤1 97
制表（Tab） 9 數(shù)字小鍵盤2 98
回車（Enter） 13 數(shù)字小鍵盤3 99
上檔（Shift） 16 數(shù)字小鍵盤4 100
控制（Ctrl） 17 數(shù)字小鍵盤5 101
Alt 18 數(shù)字小鍵盤6 102
暫停/中斷（Pause/Break） 19 數(shù)字小鍵盤7 103
大寫鎖定（Caps Lock） 20 數(shù)字小鍵盤8 104
退出（Esc） 27 數(shù)字小鍵盤9 105
上翻頁（Page Up） 33 數(shù)字小鍵盤+ 107
下翻頁（Page Down） 34 數(shù)字小鍵盤及大鍵盤上的- 109
結(jié)尾（End） 35 數(shù)字小鍵盤 . 110
開頭（Home） 36 數(shù)字小鍵盤 / 111
左箭頭（Left Arrow） 37 F1 112
上箭頭（Up Arrow） 38 F2 113
右箭頭（Right Arrow） 39 F3 114
下箭頭（Down Arrow） 70 F4 115
插入（Ins） 45 F5 116
刪除（Del） 46 F6 117
左Windows鍵 91 F7 118
右Windows鍵 92 F8 119
上下文菜單鍵 93 F9 120
數(shù)字小鍵盤0 96 F10 121
正斜杠 191 F11 122
沉音符（`） 192 F12 123
等于 61 數(shù)字鎖（Num Lock） 144
左方括號(hào) 219 滾動(dòng)鎖（Scroll Lock） 145
反斜杠（） 220 分號(hào)（IE/Safari/Chrome中） 186
右方括號(hào) 221 分號(hào)（Opera/FF中） 59
單引號(hào) 222 小于 188
? 大于 190 ? ? ? ?無論keydown或keyup事件都會(huì)存在的一些特殊情況。在Firefox和Opera中，按分號(hào)鍵時(shí)keyCode 值為 59，也就是 ASCII中分號(hào)的編碼；但 IE和 Safari返回 186，即鍵盤中按鍵的鍵碼。?
? 本文僅限內(nèi)部技術(shù)人員學(xué)習(xí)交流,不得作于其他商業(yè)用途.希望此文對(duì)廣大技人員有所幫助。原創(chuàng)文章出自:南昌網(wǎng)站制作公司-百恒網(wǎng)絡(luò)http://m.gimmickmag.com/如轉(zhuǎn)載請(qǐng)注明出處!