快捷導(dǎo)航

javascript 鍵盤(pán)事件總結(jié) 推薦

更新時(shí)間：2009年12月24日 22:02:39 作者：

在進(jìn)入正題前，我們看一下瀏覽器對(duì)于鍵盤(pán)的一些默認(rèn)事件，這有助于我們用javascript截獲鍵盤(pán)事件。

在form中， submit的快捷鍵是 enter，reset的快捷鍵是 esc。不過(guò)在IE6,safari4,ff3.5,opera10,chrome中，按Enter，不但激發(fā)form的submit事件，同時(shí)也會(huì)激發(fā)提交按鈕的onclick，激發(fā)順序?yàn)樘峤话粹o的 onclick →　form 的 onsubmit。

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

不過(guò)并不止提交按鈕會(huì)激發(fā)form的submit事件，連同上面的歸納如下：

1. 如果表單里有一個(gè)type="submit"的按鈕，回車(chē)鍵生效。
2. 如果表單里只有一個(gè)type="text"的input，不管按鈕是什么type，回車(chē)鍵生效。
3. 如果按鈕不是用input，而是用button，并且沒(méi)有加type，IE下默認(rèn)為type=button，F(xiàn)X默認(rèn)為type=submit。
4. 其他表單元素如textarea、select不影響，radio checkbox不影響觸發(fā)規(guī)則，但本身在FX下會(huì)響應(yīng)回車(chē)鍵，在IE下不響應(yīng)。
5. type="image"的input，效果等同于type="submit"。不知道為什么會(huì)設(shè)計(jì)這樣一種type，不推薦使用，應(yīng)該用CSS添加背景圖合適些。

除了在按鈕中綁定鍵盤(pán)事件外，瀏覽器還有一個(gè)accesskey 屬性來(lái)指定鏈接的快捷鍵。注意 accesskey 的設(shè)置如果和瀏覽器的菜單相同，會(huì)優(yōu)先于菜單。在IE中，快捷鍵是 alt + 設(shè)置的鍵值，F(xiàn)F是Alt+Shift+ 設(shè)置的鍵值。在IE 中，a元素的 accesskey 只是使焦點(diǎn)轉(zhuǎn)移到鏈接上，并不等同于點(diǎn)擊，F(xiàn)F 中則相當(dāng)于點(diǎn)擊。與他對(duì)比的是，input type=checkbox 的 accesskey 效果不論在IE 還是 FF 中都是點(diǎn)擊。另外，我們還可以配合label標(biāo)簽來(lái)加強(qiáng)語(yǔ)義，個(gè)人是十分推薦這種做法的。

剩下的就需要編程了。javascript事件主要通過(guò)以下三個(gè)事件來(lái)捕獲鍵盤(pán)事件：onkeydown,onkeypress與onkeyup。該三個(gè)事件的執(zhí)行順序如下：onkeydown -> onkeypress ->onkeyup。在一般情況下，采用三種鍵盤(pán)事件均可對(duì)鍵盤(pán)輸入進(jìn)行有效的響應(yīng)。當(dāng)在實(shí)際使用中，會(huì)發(fā)現(xiàn)這幾者有些不同的差別。

onkeypress事件不能對(duì)系統(tǒng)功能鍵(例如：后退、刪除等，其中對(duì)中文輸入法不能有效響應(yīng))進(jìn)行正常的響應(yīng)，onkeydown和onkeyup均可以對(duì)系統(tǒng)功能鍵進(jìn)行有效的攔截，但事件截獲的位置不同，可以根據(jù)具體的情況選擇不同的鍵盤(pán)事件。

由于onkeypress不能對(duì)系統(tǒng)功能鍵進(jìn)行捕獲，導(dǎo)致window.event對(duì)象的keyCode屬性和onkeydown，onkeyup 鍵盤(pán)事件中獲取的keyCode屬性不同，主要表現(xiàn)在onkeypress事件的keyCode對(duì)字母的大小寫(xiě)敏感，而onkeydown、 onkeyup事件不敏感；onkeypress事件的keyCode無(wú)法區(qū)分主鍵盤(pán)上的數(shù)字鍵和副鍵盤(pán)數(shù)字鍵的，而onkeydown、onkeyup 的keyCode對(duì)主副鍵盤(pán)的數(shù)字鍵敏感。

<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="gb2312"/> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <title>鍵盤(pán)事件</title> <style type="text/css"> td { text-align:center; } </style>  </head> <body> <h3>鍵盤(pán)事件</h3> <form> <table border=1 cellpadding="2" cellspacing="0"> <tr> <th></th> <th>onKeyDown</th> <th>onKeyPress</th> <th>onKeyUp</th> </tr> <tr> <th>Key Codes</th> <td id="downKeyCode">0</td> <td id="pressKeyCode">0</td> <td id="upKeyCode">0</td> </tr> <tr> <th>Char Codes (IE5/Mac; NN6)</th> <td id="downCharCode">0</td> <td id="pressCharCode">0</td> <td id="upCharCode">0</td> </tr> <tr> <th rowspan="3">Modifier Keys</th> <td><span id="shiftdown">Shift</span></td> <td><span id="shift">Shift</span></td> <td><span id="shiftUp">Shift</span></td> </tr> <tr> <td><span id="ctrlDown">Ctrl</span></td> <td><span id="ctrl">Ctrl</span></td> <td><span id="ctrlUp">Ctrl</span></td> </tr> <tr> <td><span id="altdown">Alt</span></td> <td><span id="alt">Alt</span></td> <td><span id="altUp">Alt</span></td> </tr> </table> </form> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

我們可以利用以下腳本來(lái)監(jiān)聽(tīng)網(wǎng)頁(yè)中的鍵盤(pán)事件，一旦用戶按下Enter鍵便開(kāi)始你綁定的事件。

復(fù)制代碼代碼如下:

 
function getKey(e){ 
e = e || window.event; 
var keycode = e.which ? e.which : e.keyCode; 
if(keycode == 13 || keycode == 108){ //如果按下ENTER鍵 
//在這里設(shè)置你想綁定的事件 
} 
} 

// 把keyup事件綁定到document中 
function listenKey ( ) { 
if (document.addEventListener) { 
document.addEventListener("keyup",getKey,false); 
} else if (document.attachEvent) { 
document.attachEvent("onkeyup",getKey); 
} else { 
document.onkeyup = getKey; 
} 
} 

最后附上，鍵盤(pán)中所有按鈕的keycode一覽

字母和數(shù)字鍵的鍵碼值(keyCode)
按鍵	鍵碼	按鍵	鍵碼	按鍵	鍵碼	按鍵	鍵碼
A	65	J	74	S	83	1	49
B	66	K	75	T	84	2	50
C	67	L	76	U	85	3	51
D	68	M	77	V	86	4	52
E	69	N	78	W	87	5	53
F	70	O	79	X	88	6	54
G	71	P	80	Y	89	7	55
H	72	Q	81	Z	90	8	56
I	73	R	82	0	48	9	57

數(shù)字鍵盤(pán)上的鍵的鍵碼值(keyCode)				功能鍵鍵碼值(keyCode)
按鍵	鍵碼	按鍵	鍵碼	按鍵	鍵碼	按鍵	鍵碼
0	96	8	104	F1	112	F7	118
1	97	9	105	F2	113	F8	119
2	98	*	106	F3	114	F9	120
3	99	+	107	F4	115	F10	121
4	100	Enter	108	F5	116	F11	122
5	101	-	109	F6	117	F12	123
6	102	.	110
7	103	/	111

控制鍵鍵碼值(keyCode)
按鍵	鍵碼	按鍵	鍵碼	按鍵	鍵碼	按鍵	鍵碼
BackSpace	8	Esc	27	Right Arrow	39	-_	189
Tab	9	Spacebar	32	Down Arrow	40	.>	190
Clear	12	Page Up	33	Insert	45	/?	191
Enter	13	Page Down	34	Delete	46	`~	192
Shift	16	End	35	Num Lock	144	[{	219
Control	17	Home	36	;:	186	\\|	220
Alt	18	Left Arrow	37	=+	187	]}	221
Cape Lock	20	Up Arrow	38	,<	188	'"	222