快捷導(dǎo)航

JavaScript鍵盤事件常見(jiàn)用法實(shí)例分析

更新時(shí)間：2019年01月03日 14:52:16 作者：司馬懿字仲達(dá)

這篇文章主要介紹了JavaScript鍵盤事件常見(jiàn)用法,簡(jiǎn)單描述了javascript鍵盤事件的分類、功能,并結(jié)合實(shí)例形式給出了javascript響應(yīng)鍵盤事件相關(guān)使用技巧,需要的朋友可以參考下

本文實(shí)例講述了JavaScript鍵盤事件常見(jiàn)用法。分享給大家供大家參考，具體如下：

JavaScript 鍵盤事件有以下3種

keydown
鍵盤按鍵按下（如果按著不放，會(huì)持續(xù)觸發(fā)該事件），可以捕獲組合鍵。

keypress
鍵盤非功能按鍵按下（在keydown之后觸發(fā)，如果按著不放會(huì)持續(xù)觸發(fā)該事件），只能捕獲單個(gè)鍵。

keyup
鍵盤按鍵彈起，可以捕獲組合鍵。

全局事件對(duì)象event

event.ctrlKey
功能鍵”ctrl”鍵是否按下。

event.altKey
功能鍵”alt”鍵是否按下。

event.shiftKey
功能鍵”shift”鍵是否按下。

event.keyCode
鍵盤按鍵鍵碼。

event.charCode
鍵盤非功能按鍵的ASCII值，可以用其區(qū)分大小寫。

String.fromCharCode(event.charCode)
將ASCII值轉(zhuǎn)化為對(duì)應(yīng)的字符形式。

注意點(diǎn)

KeyDown觸發(fā)后，不一定觸發(fā)KeyUp。比如此時(shí)單擊鼠標(biāo)右鍵。
其中PrScrn 按鍵KeyPress、KeyDown和KeyUp 都不能捕獲。
KeyPress主要用來(lái)捕獲數(shù)字（包括Shift+數(shù)字的符號(hào)）、字母（注意：包括大小寫）、小鍵盤等除了F1-12、SHIFT、Alt、Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock、{菜單鍵}、{開(kāi)始鍵}和方向鍵外的ANSI字符。
KeyDown 和 KeyUp 的keyCode區(qū)分小鍵盤和主鍵盤的數(shù)字字符。KeyPress 則不區(qū)分小鍵盤和主鍵盤的數(shù)字字符。

keyCode	key
8	BackSpace BackSpace
9	Tab Tab
12	Clear
13	Enter
16	Shift_L
17	Control_L
18	Alt_L
19	Pause
20	Caps_Lock
27	Escape Escape
32	space space
33	Prior
34	Next
35	End
36	Home
37	Left
38	Up
39	Right
40	Down
41	Select
42	Print
43	Execute
45	Insert
46	Delete
47	Help
48	0 equal braceright
49	1 exclam onesuperior
50	2 quotedbl twosuperior
51	3 section threesuperior
52	4 dollar
53	5 percent
54	6 ampersand
55	7 slash braceleft
56	8 parenleft bracketleft
57	9 parenright bracketright
65	a A
66	b B
67	c C
68	d D
69	e E EuroSign
70	f F
71	g G
72	h H
73	i I
74	j J
75	k K
76	l L
77	m M mu
78	n N
79	o O
80	p P
81	q Q at
82	r R
83	s S
84	t T
85	u U
86	v V
87	w W
88	x X
89	y Y
90	z Z
96	KP_0 KP_0
97	KP_1 KP_1
98	KP_2 KP_2
99	KP_3 KP_3
100	KP_4 KP_4
101	KP_5 KP_5
102	KP_6 KP_6
103	KP_7 KP_7
104	KP_8 KP_8
105	KP_9 KP_9
106	KP_Multiply KP_Multiply
107	KP_Add KP_Add
108	KP_Separator KP_Separator
109	KP_Subtract KP_Subtract
110	KP_Decimal KP_Decimal
111	KP_Divide KP_Divide
112	F1
113	F2
114	F3
115	F4
116	F5
117	F6
118	F7
119	F8
120	F9
121	F10
122	F11
123	F12
124	F13
125	F14
126	F15
127	F16
128	F17
129	F18
130	F19
131	F20
132	F21
133	F22
134	F23
135	F24
136	Num_Lock
137	Scroll_Lock
187	acute grave
188	comma semicolon
189	minus underscore
190	period colon
192	numbersign apostrophe
210	plusminus hyphen macron
211
212	copyright registered
213	guillemotleft guillemotright
214	masculine ordfeminine
215	ae AE
216	cent yen
217	questiondown exclamdown
218	onequarter onehalf threequarters
220	less greater bar
221	plus asterisk asciitilde
227	multiply division
228	acircumflex Acircumflex
229	ecircumflex Ecircumflex
230	icircumflex Icircumflex
231	ocircumflex Ocircumflex
232	ucircumflex Ucircumflex
233	ntilde Ntilde
234	yacute Yacute
235	oslash Ooblique
236	aring Aring
237	ccedilla Ccedilla
238	thorn THORN
239	eth ETH
240	diaeresis cedilla currency
241	agrave Agrave atilde Atilde
242	egrave Egrave
243	igrave Igrave
244	ograve Ograve otilde Otilde
245	ugrave Ugrave
246	adiaeresis Adiaeresis
247	ediaeresis Ediaeresis
248	idiaeresis Idiaeresis
249	odiaeresis Odiaeresis
250	udiaeresis Udiaeresis
251	ssharp question backslash
252	asciicircum degree
253	3 sterling
254	Mode_switch

測(cè)試范例

<html>
  <body>
    <script type="text/javascript">
      function appendText(str) {
        document.body.innerHTML += (str+"<br/>");
      }
      document.onkeydown = function(){
        //如果長(zhǎng)按的話，會(huì)持續(xù)觸發(fā)keydown和keypress(如果有該事件的話)
        appendText("onkeydown");
        if(event.ctrlKey) {
          appendText("ctrlKey");
        }
        if(event.altKey) {
          appendText("altKey");
        }
        if(event.shiftKey) {
          appendText("shiftKey");
        }
        //無(wú)charCode屬性，只有keypress才有該屬性
        if(event.charCode) {
          appendText(String.fromCharCode(event.charCode));
        }
        if(event.keyCode) {
          appendText(event.keyCode);
        }
        //該語(yǔ)句只對(duì)chrome和edge有效，可以屏蔽keypress(只對(duì)chrome和edge瀏覽器有效)
        //event.returnValue = false;
      };
      document.onkeypress = function() {
        //keypress無(wú)法監(jiān)聽(tīng)到組合鍵
        appendText("onkeypress");
        if(event.ctrlKey) {
          appendText("ctrlKey");
        }
        if(event.altKey) {
          appendText("altKey");
        }
        if(event.shiftKey) {
          appendText("shiftKey");
        }
        //charCode是字母的Unicode值
        if(event.charCode) {
          appendText(String.fromCharCode(event.charCode));
        }
      }
      document.onkeyup = function() {
        appendText("onkeyup");
      }
    </script>
  </body>
</html>

這里使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼，運(yùn)行效果如下圖所示：