鍵盤事件的種類
鍵盤事件由用戶擊打鍵盤觸發(fā)面殖，主要有keydown、keypress哭廉、keyup三個(gè)事件脊僚，它們都繼承了KeyboardEvent接口。
-
keydown：按下鍵盤時(shí)觸發(fā)群叶。 -
keypress：按下有值的鍵時(shí)觸發(fā)吃挑，即按下 Ctrl钝荡、Alt、Shift舶衬、Meta 這樣無值的鍵埠通，這個(gè)事件不會(huì)觸發(fā)。對(duì)于有值的鍵逛犹，按下時(shí)先觸發(fā)keydown事件端辱，再觸發(fā)這個(gè)事件。 -
keyup：松開鍵盤時(shí)觸發(fā)該事件虽画。
如果用戶一直按鍵不松開舞蔽，就會(huì)連續(xù)觸發(fā)鍵盤事件，觸發(fā)的順序如下码撰。
- keydown
- keypress
- keydown
- keypress
- ...（重復(fù)以上過程）
- keyup
KeyboardEvent 接口概述
KeyboardEvent接口用來描述用戶與鍵盤的互動(dòng)渗柿。這個(gè)接口繼承了Event接口，并且定義了自己的實(shí)例屬性和實(shí)例方法脖岛。
瀏覽器原生提供KeyboardEvent構(gòu)造函數(shù)朵栖，用來新建鍵盤事件的實(shí)例。
new KeyboardEvent(type, options)
KeyboardEvent構(gòu)造函數(shù)接受兩個(gè)參數(shù)柴梆。第一個(gè)參數(shù)是字符串陨溅，表示事件類型；第二個(gè)參數(shù)是一個(gè)事件配置對(duì)象绍在，該參數(shù)可選门扇。除了Event接口提供的屬性，還可以配置以下字段偿渡，它們都是可選臼寄。
-
key：字符串，當(dāng)前按下的鍵卸察，默認(rèn)為空字符串脯厨。 -
code：字符串，表示當(dāng)前按下的鍵的字符串形式坑质，默認(rèn)為空字符串合武。 -
location：整數(shù)，當(dāng)前按下的鍵的位置涡扼，默認(rèn)為0稼跳。 -
ctrlKey：布爾值，是否按下 Ctrl 鍵吃沪，默認(rèn)為false汤善。 -
shiftKey：布爾值，是否按下 Shift 鍵，默認(rèn)為false红淡。 -
altKey：布爾值不狮，是否按下 Alt 鍵，默認(rèn)為false在旱。 -
metaKey：布爾值摇零，是否按下 Meta 鍵，默認(rèn)為false桶蝎。 -
repeat：布爾值驻仅，是否重復(fù)按鍵，默認(rèn)為false登渣。
KeyboardEvent 的實(shí)例屬性
KeyboardEvent.altKey噪服，KeyboardEvent.metaKey.ctrlKey，KeyboardEvent.metaKey胜茧，KeyboardEvent.shiftKey
以下屬性都是只讀屬性粘优，返回一個(gè)布爾值，表示是否按下對(duì)應(yīng)的鍵呻顽。
-
KeyboardEvent.altKey：是否按下 Alt 鍵 -
KeyboardEvent.ctrlKey：是否按下 Ctrl 鍵 -
KeyboardEvent.metaKey：是否按下 meta 鍵（Mac 系統(tǒng)是一個(gè)四瓣的小花敬飒，Windows 系統(tǒng)是 windows 鍵） -
KeyboardEvent.shiftKey：是否按下 Shift 鍵
下面是一個(gè)示例。
function showChar(e) {
console.log('ALT: ' + e.altKey);
console.log('CTRL: ' + e.ctrlKey);
console.log('Meta: ' + e.metaKey);
console.log('Shift: ' + e.shiftKey);
}
document.body.addEventListener('keydown', showChar, false);
KeyboardEvent.code
KeyboardEvent.code屬性返回一個(gè)字符串芬位，表示當(dāng)前按下的鍵的字符串形式。該屬性只讀带到。
下面是一些常用鍵的字符串形式昧碉。
- 數(shù)字鍵0 - 9：返回
digital0-digital9 - 字母鍵A - z：返回
KeyA-KeyZ - 功能鍵F1 - F12：返回
F1-F12 - 方向鍵：返回
ArrowDown、ArrowUp揽惹、ArrowLeft被饿、ArrowRight - Alt 鍵：返回
AltLeft或AltRight - Shift 鍵：返回
ShiftLeft或ShiftRight - Ctrl 鍵：返回
ControlLeft或ControlRight
KeyboardEvent.key
KeyboardEvent.key屬性返回一個(gè)字符串，表示按下的鍵名搪搏。該屬性只讀狭握。
如果按下的鍵代表可打印字符，則返回這個(gè)字符疯溺，比如數(shù)字论颅、字母。
如果按下的鍵代表不可打印的特殊字符囱嫩，則返回預(yù)定義的鍵值恃疯，比如Backspace，Tab墨闲，Enter今妄，Shift，Control，Alt盾鳞，CapsLock犬性，Esc，Spacebar腾仅，PageUp乒裆，PageDown，End攒砖，Home缸兔，Left，Right吹艇，Up惰蜜，Down，PrintScreen受神，Insert抛猖，Del，Win鼻听，F(xiàn)1～F12财著，NumLock，Scroll等撑碴。
如果同時(shí)按下一個(gè)控制鍵和一個(gè)符號(hào)鍵撑教，則返回符號(hào)鍵的鍵名。比如醉拓，按下Ctrl + a伟姐，則返回a；按下Shift + a亿卤，則返回大寫的A愤兵。
如果無法識(shí)別鍵名，返回字符串Unidentified排吴。
KeyboardEvent.location
KeyboardEvent.location屬性返回一個(gè)整數(shù)秆乳，表示按下的鍵處在鍵盤的哪一個(gè)區(qū)域。它可能取以下值钻哩。
- 0：處在鍵盤的主區(qū)域屹堰，或者無法判斷處于哪一個(gè)區(qū)域。
- 1：處在鍵盤的左側(cè)憋槐，只適用那些有兩個(gè)位置的鍵（比如 Ctrl 和 Shift 鍵）双藕。
- 2：處在鍵盤的右側(cè)，只適用那些有兩個(gè)位置的鍵（比如 Ctrl 和 Shift 鍵）阳仔。
- 3：處在數(shù)字小鍵盤忧陪。
KeyboardEvent.repeat
KeyboardEvent.repeat返回一個(gè)布爾值扣泊，代表該鍵是否被按著不放，以便判斷是否重復(fù)這個(gè)鍵嘶摊，即瀏覽器會(huì)持續(xù)觸發(fā)keydown和keypress事件延蟹，直到用戶松開手為止。
KeyboardEvent 的實(shí)例方法
KeyboardEvent.getModifierState()
KeyboardEvent.getModifierState()方法返回一個(gè)布爾值叶堆，表示是否按下或激活指定的功能鍵阱飘。它的常用參數(shù)如下。
-
Alt：Alt 鍵 -
CapsLock：大寫鎖定鍵 -
Control：Ctrl 鍵 -
Meta：Meta 鍵 -
NumLock：數(shù)字鍵盤開關(guān)鍵 -
Shift：Shift 鍵
if (
event.getModifierState('Control') +
event.getModifierState('Alt') +
event.getModifierState('Meta') > 1
) {
return;
}
上面代碼表示虱颗，只要Control沥匈、Alt、Meta里面忘渔，同時(shí)按下任意兩個(gè)或兩個(gè)以上的鍵就返回高帖。
