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

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

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

示例

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

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

鍵盤事件屬性

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

鍵盤事件定義的屬性:

屬性	說明
keyCode	該屬性包含鍵盤中對應鍵位的鍵值
charCode	該屬性包含鍵盤中對應鍵位的Unicode編碼，僅DOM支持
target	發(fā)生事件的節(jié)點(包含元素),僅DOM支持
srcElement	發(fā)生事件的元素，僅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; //獲取發(fā)生事件的元素，兼容IE和DOMif (e.ctrlKey && e.shiftKey) { //如果同時按下Ctrl和Shift鍵t.parentNode.removeChild(t); //移除當前元素} }

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

keyCode和charCode屬性值

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

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

鍵位和碼值對照表

鍵位	碼值	鍵位	碼值
0~9(數(shù)字鍵)	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事件處理函數(shù)function keyDown(event) { //方向鍵控制元素移動函數(shù)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對象上注冊鼠標按下事件類型處理函數(shù)，在事件回調(diào)函數(shù)keyDown()中偵測當前按下的方向鍵，并決定定位元素在窗口中的位置。其中元素的offsetLeft和offsetTop屬性可以存取它在頁面中的位置。

鍵盤響應順序

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

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

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

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

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

示例

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

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

演示效果如下:

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

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

當連續(xù)按下字符A時:

當連續(xù)按下Shift鍵時:

?

總結

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。