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

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

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

示例

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

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

鍵盤事件屬性

鍵盤定義了很多屬性，如下表所示。利用這些屬性可以精確控制鍵盤操作。鍵盤事件屬性一般只在鍵盤相關(guān)事件發(fā)生時(shí)才會(huì)存在于事件對(duì)象中，但是ctrlKey和shiftKey屬性除外，因?yàn)樗鼈兛梢栽谒Ｊ录写嬖凇＠?#xff0c;當(dāng)按下Ctrl或Shift鍵時(shí)單擊鼠標(biāo)操作。

鍵盤事件定義的屬性:

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

示例1

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

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

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

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)定的，如下表所示。

鍵位和碼值對(duì)照表

鍵位	碼值	鍵位	碼值
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

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

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

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

鍵盤響應(yīng)順序

當(dāng)按下鍵盤時(shí)，會(huì)連續(xù)觸發(fā)多個(gè)事件，它們將按如下順序發(fā)生。

對(duì)于字符鍵來說，鍵盤事件的響應(yīng)順序: keydown -> keypress -> keyup。

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

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

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

示例

下面設(shè)計(jì)一個(gè)簡(jiǎn)單示例，以獲取鍵盤事件相應(yīng)順序。

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

演示效果如下:

當(dāng)分別輸入A、B、C時(shí):

當(dāng)分別輸入Shift、Ctrl、Alt功能鍵時(shí):

當(dāng)連續(xù)按下字符A時(shí):

當(dāng)連續(xù)按下Shift鍵時(shí):

?

總結(jié)

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

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