Javascript 檢測鍵盤按鍵信息及鍵碼值對應介紹

更新時間：2013年01月03日 16:18:59 作者：

Javascript中有3個事件句柄在對應鍵盤的輸入狀態(tài):按鍵被按下（按下按鍵但還沒有抬起）、點擊按鍵（按下并抬起按鍵）、按鍵抬起（按鍵抬起之后）,接下來詳細介紹，感興趣的朋友可以了解下

Javascript中有3個事件句柄在對應鍵盤的輸入狀態(tài)：keydown、keypress和keyup。
分別對應的意思是：按鍵被按下（按下按鍵但還沒有抬起）、點擊按鍵（按下并抬起按鍵）、按鍵抬起（按鍵抬起之后）
按鍵的分類
按鍵可以分為“實鍵”和“虛鍵”
實鍵可以理解為我們能夠看到并打印出來的按鍵，如字母“A”、數(shù)字“1”、字符“?”等等
虛鍵就是那些無法打印出來起到控制作用的按鍵，如“Ctrl”、“Alt”、“Shift”、“方向鍵”等等
IE在處理虛鍵時有個特例：虛鍵不會產生keypress事件，必須使用keydown或keyup來捕獲
按鍵碼和字符碼
按鍵碼是計算機用來識別不同按鍵的編碼，每一個按鍵都有按鍵碼
字符碼是可被打印的實鍵特有的，對應了鍵盤上顯示的字符
按鍵碼可以使用String.fromCharCode()轉換為字符碼
按鍵碼和和字符碼的對應表可以在本文最后找到。
獲取實鍵

復制代碼代碼如下:

 
function getKeyCode(e) { 
var keyCode = 0; 
var e = e || window.event; 
keyCode = e.keyCode || e.which || e.charCode; 
alert(keyCode); 
} 

稍微解釋下
1. e為Firefox等標準瀏覽器支持的JS隱藏變量，表示一個“事件”；IE系列中沒有“e”，而是用window.event來表示“事件”；所以var e = e || window.event;就表示：獲取當前正在發(fā)生的事件。
2. e.keyCode、e.which、e.charCode都代表獲取按鍵碼，但不同的瀏覽器支持不同的寫法
獲取虛鍵

復制代碼代碼如下:

 
function getKeyCode(e) { 
var keyCode = 0; 
var e = e || window.event; 
if (e.ctrlKey) alert("ctrlKey pressed"); 
if (e.altKey) alert("altKey pressed"); 
if (e.shiftKey) alert("shiftKey pressed"); 
} 

字母和數(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ù)字鍵盤上的鍵的鍵碼值(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	Dw 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

多媒體鍵碼值(keyCode)
按鍵	鍵碼	按鍵	鍵碼	按鍵	鍵碼	按鍵	鍵碼
音量加	175
音量減	174
停止	179
靜音	173
瀏覽器	172
郵件	180
搜索	170
收藏	171

您可能感興趣的文章:

Javascript獲取當前日期的農歷日期代碼
這篇文章主要介紹了利用Javascript獲取當前日期的農歷日期代碼，很實用，需要的朋友可以參考下
2014-10-10
淺析JavaScript中的特殊函數(shù)及用法小結
JavaScript中的函數(shù)本質上是一個對象，我們可以將這個對象賦值給一個變量，這就使JavaScript中的函數(shù)變得非常的靈活，現(xiàn)在就來淺看一下JavaScript中函數(shù)的一些用法,需要的朋友可以參考下
2022-06-06
一道面試題引發(fā)的對javascript類型轉換的思考
本文主要介紹了javascript類型轉換的相關知識，具有很好的參考價值。下面跟著小編一起來看下吧
2017-03-03
JavaScript的9種繼承實現(xiàn)方式歸納
這篇文章主要介紹了JavaScript的9種繼承實現(xiàn)方式歸納,本文講解了原型鏈繼承、原型繼承（非原型鏈）、臨時構造器繼承、屬性拷貝、對象間繼承等繼承方式,需要的朋友可以參考下
2015-05-05
詳解JavaScript中的閉包是如何產生的
這篇文章主要為大家詳細介紹了從內存管理的角度來看，JavaScript中的閉包是如何產生的。文中的示例代碼簡潔易懂，感興趣的小伙伴可以了解一下
2022-12-12
一文詳解JavaScript的事件監(jiān)聽(最新整理)
Web頁面需要經(jīng)常和用戶之間進行交互,而交互的過程中我們可能想要捕捉這個交互的過程,比如用戶點擊了某個按鈕、用戶在輸入框里面輸入了某個文本、用戶鼠標經(jīng)過了某個位置,下面介紹下JavaScript的事件監(jiān)聽,感興趣的朋友一起看看吧
2024-01-01
JS和JQuery實現(xiàn)雪花飄落效果
本文主要給大家講述了如何用JS和JQuery兩種方式實現(xiàn)雪花飄落的動畫效果，有需要的朋友收藏一下吧。
2017-11-11
js實現(xiàn)音頻控制進度條功能
本文主要介紹了js實現(xiàn)音頻控制進度條功能的示例代碼。具有很好的參考價值。下面跟著小編一起來看下吧
2017-04-04
Js操作樹節(jié)點自動折疊展開的幾種方法
這篇文章主要介紹了Js操作樹節(jié)點自動折疊展開的幾種方法,需要的朋友可以參考下
2014-05-05
var?let?const關鍵字之間的區(qū)別及使用場景示例詳解
這篇文章主要為大家介紹了var?let?const關鍵字之間的區(qū)別及使用場景示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-12-12