在JavaScript中，當用戶操作鍵盤時，會觸發鍵盤事件，鍵盤事件主要包括下面3中類型:

• keydown: 在鍵盤上按下某個鍵時觸發。如果按住某個鍵，會不斷觸發該事件，但是Opera瀏覽器不支持這種連續操作。該事件處理函數返回false時，會取消默認的動作(如輸入的鍵盤字符，在IE和Safari瀏覽器下還會禁止keypress事件響應).
• keypress: 按下某個鍵盤鍵并釋放時觸發。如果按住某個鍵，會不斷觸發該事件。該事件處理函數返回false時，會取消默認的動作(如輸入的鍵盤字符).
• keyup： 釋放某個鍵盤鍵時觸發。該事件僅在松開鍵盤時觸發一次，不是一個連續的響應狀態。

當獲取用戶正按下建碼時，可以使用keydown、keypress和keyup事件獲取這些信息。其中keydown和keypress事件基本上是同義事件，它們的表現也完全一致，不過一些瀏覽器不允許使用keypress事件獲取按鍵信息。所有元素都支持鍵盤事件，但鍵盤事件多被應用在表單輸入中。

示例

下面示例實時捕獲鍵盤操作的各種細節，即鍵盤響應時間類型及對應的鍵值。

<textarea id="key"></textarea> <script>var key=document.getElementById("key");key.onkeydown = f; //注冊keydown事件處理函數key.onkeyup = f; //注冊keyup事件處理函數key.onkeypress = f; //注冊keypress事件處理函數function f (e) {var e = e || window.event; //標準化事件處理var s = e.type + " " + e.keyCode; //獲取鍵盤事件類型和按下的值key.value = s;} </script>

鍵盤事件屬性

鍵盤定義了很多屬性，如下表所示。利用這些屬性可以精確控制鍵盤操作。鍵盤事件屬性一般只在鍵盤相關事件發生時才會存在于事件對象中，但是ctrlKey和shiftKey屬性除外，因為它們可以在水保事件中存在。例如，當按下Ctrl或Shift鍵時單擊鼠標操作。

鍵盤事件定義的屬性:

屬性	說明
keyCode	該屬性包含鍵盤中對應鍵位的鍵值
charCode	該屬性包含鍵盤中對應鍵位的Unicode編碼，僅DOM支持
target	發生事件的節點(包含元素),僅DOM支持
srcElement	發生事件的元素，僅IE支持
shiftKey	是否按下Shift鍵，如果按下返回true，否則為false
ctrlKey	是否按下Ctrl鍵，如果按下返回true，否則為false
altKey	是否按下Alt鍵，如果按下返回true，否則為false
metaKey	是否按下Meta鍵，如果按下返回true，否則為false，僅DOM支持

示例1

ctrlKey和shiftKey屬性可存在于鍵盤和鼠標事件中，表示鍵盤上的Ctrl和Shift鍵是否被按住。下面示例能夠檢測Ctrl和Shift鍵是否被同時按下。如果同時按下，且鼠標單擊某個頁面元素，則會把該元素從頁面中刪除。

document.onclick = function (e) {var e = e || window.event; //標準化事件對象var t = e.target || e.srcElement; //獲取發生事件的元素，兼容IE和DOMif (e.ctrlKey && e.shiftKey) { //如果同時按下Ctrl和Shift鍵t.parentNode.removeChild(t); //移除當前元素} }

keyCode和charCode屬性使用比較復雜，但是它們在實際開發中又比較常用，故比較這兩個屬性在不同事件類型和不同瀏覽器中的表現時非常必要的，如下表所示。讀取可以根據需要有針對性的選用事件響應類型和引用屬性值。

keyCode和charCode屬性值

屬性	IE事件模型	DOM事件模型
keyCode(keypress)	返回所有字符鍵的正確值，區分大寫狀態(65-90)和小寫狀態(97-122)	功能鍵返回正確值，而Shift、Ctrl、Alt、PrintScreen、ScrollLock無返回值，其他所有鍵值都返回0
keyCode(keydown)	返回所有鍵值(除PrintScreen鍵),字母鍵都以大寫狀態顯示鍵值(65~90)	返回所有鍵值(除PrintScreen鍵),字母鍵都以大寫狀態顯示鍵值(65~90)
keyCode(keyup)	返回所有鍵值(除PrintScreen鍵),字母鍵都以大寫狀態顯示鍵值(65~90)	返回所有鍵值(除PrintScreen鍵),字母鍵都以大寫狀態顯示鍵值(65~90)
charCode(keypress)	不支持該屬性	返回字符鍵，區分大寫狀態(65~90)和小寫狀態(97~122),Shift、Ctrl、Alt、PrintScreen、ScrollLock無返回值，其他所有鍵值都返回0
charCode(keydown)	不支持該屬性	所有鍵值為0
charCode(keyup)	不支持該屬性	所有鍵值為0

某些鍵的可用性不是很正確，如PageUp和Home鍵等。不過常用功能鍵和字符鍵都是比較穩定的，如下表所示。

鍵位和碼值對照表

鍵位	碼值	鍵位	碼值
0~9(數字鍵)	48~57	A~Z(字母鍵)	65~90
Backspace(退格鍵)	8	Tab(制表鍵)	9
Enter(回車鍵)	13	Space(空格鍵)	32
Left arrow(左箭頭鍵)	37	Top arrow(上箭頭鍵)	38
Rigth arrow(右箭頭鍵)	39	Down arrow(下箭頭鍵)?	40

示例2

下面示例演示了如何使用方向鍵控制頁面元素的移動效果。

<div id="box"></div> <script>var box = document.getElementById("box"); //獲取頁面元素的引用指針box.style.position = "absolute"; //色塊絕對定位box.style.width = "20px"; //色塊寬度box.style.height = "20px"; //色塊高度box.style.backgroundColor = "red"; //色塊背景document.onkeydown = keyDown;//在Document對象中注冊keyDown事件處理函數function keyDown(event) { //方向鍵控制元素移動函數var event = event || window.event; //標準化事件對象switch (event.keyCode) { //獲取當前按下鍵盤鍵的編碼case 37: //按下左箭頭鍵，向左移動5個像素box.style.left = box.offsetLeft - 5 + "px";break;case 39: //按下右箭頭鍵，向右移動5個像素box.style.left = box.offsetLeft + 5 + "px";break;case 38: //按下上箭頭鍵，向上移動5個像素box.style.top = box.offsetTop - 5 + "px";break;case 40: //按下下箭頭鍵，向下移動5個像素box.style.top = box.offsetTop + 5 + "px";break;}return false} </script>

在上面示例中，首先獲取頁面元素，通過CSS腳本控制元素絕對定位、大小和背景色。然后在document對象上注冊鼠標按下事件類型處理函數，在事件回調函數keyDown()中偵測當前按下的方向鍵，并決定定位元素在窗口中的位置。其中元素的offsetLeft和offsetTop屬性可以存取它在頁面中的位置。

鍵盤響應順序

當按下鍵盤時，會連續觸發多個事件，它們將按如下順序發生。

對于字符鍵來說，鍵盤事件的響應順序: keydown -> keypress -> keyup。

對于非字符鍵(如功能鍵或特殊鍵)來說，鍵盤事件的相應順序: keydown -> keyup。

如果按下字符鍵不放，則keydown和keypress事件將逐個持續發生，直至松開按鍵。

如果按下非字符鍵不放，則只有keydown事件持續發生，直至松開按鍵。

示例

下面設計一個簡單示例，以獲取鍵盤事件相應順序。

<textarea id="text" cols="26" rows="16"></textarea> <script>var n = 1; //定義編號變量var text = document.getElementById("text"); //獲取文本區域的引用指針text.onkeydown = f;// 注冊keydown事件處理函數text.onkeyup = f; //注冊keyup事件處理函數text.onkeypress = f; //注冊keypress事件處理函數function f(e) { //事件調用函數var e = e || window.event; //標準化事件對象text.value += (n++) + "=" + e.type +" (keyCode=" + e.keyCode + ")\n";//捕獲事件響應信息} </script>

演示效果如下:

當分別輸入A、B、C時:

當分別輸入Shift、Ctrl、Alt功能鍵時:

當連續按下字符A時:

當連續按下Shift鍵時:

?

總結

以上是生活随笔為你收集整理的JS键盘事件(非常详细)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。