JavaScript键盘事件常见用法实例分析

时间:2020-05-16 司马懿字仲达人气:0

本文实例讲述了JavaScript键盘事件常见用法。分享给大家供大家参考，具体如下：

JavaScript 键盘事件有以下3种

keydown
键盘按键按下（如果按着不放，会持续触发该事件），可以捕获组合键。

keypress
键盘非功能按键按下（在keydown之后触发，如果按着不放会持续触发该事件），只能捕获单个键。

keyup
键盘按键弹起，可以捕获组合键。

全局事件对象event

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

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

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

event.keyCode
键盘按键键码。

event.charCode
键盘非功能按键的ASCII值，可以用其区分大小写。

String.fromCharCode(event.charCode)
将ASCII值转化为对应的字符形式。

注意点

KeyDown触发后，不一定触发KeyUp。比如此时单击鼠标右键。
其中PrScrn 按键KeyPress、KeyDown和KeyUp 都不能捕获。
KeyPress主要用来捕获数字（包括Shift+数字的符号）、字母（注意：包括大小写）、小键盘等除了F1-12、SHIFT、Alt、Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock、{菜单键}、{开始键}和方向键外的ANSI字符。
KeyDown 和 KeyUp 的keyCode区分小键盘和主键盘的数字字符。KeyPress 则不区分小键盘和主键盘的数字字符。

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

测试范例

<html>
  <body>
    <script type="text/javascript">
      function appendText(str) {
        document.body.innerHTML += (str+"<br/>");
      }
      document.onkeydown = function(){
        //如果长按的话，会持续触发keydown和keypress(如果有该事件的话)
        appendText("onkeydown");
        if(event.ctrlKey) {
          appendText("ctrlKey");
        }
        if(event.altKey) {
          appendText("altKey");
        }
        if(event.shiftKey) {
          appendText("shiftKey");
        }
        //无charCode属性，只有keypress才有该属性
        if(event.charCode) {
          appendText(String.fromCharCode(event.charCode));
        }
        if(event.keyCode) {
          appendText(event.keyCode);
        }
        //该语句只对chrome和edge有效，可以屏蔽keypress(只对chrome和edge浏览器有效)
        //event.returnValue = false;
      };
      document.onkeypress = function() {
        //keypress无法监听到组合键
        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代码运行工具：http://tools.softyun.net/code/HtmlJsRun测试上述代码，运行效果如下图所示：

希望本文所述对大家JavaScript程序设计有所帮助。

加载全部内容