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

更新时间：2019年01月03日 14:52:16 作者：司马懿字仲达

这篇文章主要介绍了JavaScript键盘事件常见用法,简单描述了javascript键盘事件的分类、功能,并结合实例形式给出了javascript响应键盘事件相关使用技巧,需要的朋友可以参考下

本文实例讲述了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.jb51.net/code/HtmlJsRun测试上述代码，运行效果如下图所示：

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

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

您可能感兴趣的文章:

实现表格中行点击时的渐扩效果！
实现表格中行点击时的渐扩效果！...
2006-12-12
JavaScript实践之使用Canvas开发一个可配置的大转盘抽奖功能
公司项目搞优惠活动,让做一个转盘抽奖的活动,这篇文章主要给大家介绍了关于JavaScript实践之使用Canvas开发一个可配置的大转盘抽奖功能的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2023-11-11
Javascript缓存API
JavaScript ServiceWorker API的好处就是让WEB开发人员轻松的控制缓存。这篇文章主要为大家详细介绍了Javascript缓存API，感兴趣的小伙伴们可以参考一下
2016-06-06
JavaScript点击按钮后弹出透明浮动层的方法
这篇文章主要介绍了JavaScript点击按钮后弹出透明浮动层的方法,可实现点击按钮弹出居中的透明浮动层的效果,涉及javascript操作鼠标事件及页面样式的相关技巧,需要的朋友可以参考下
2015-05-05
JS实现的简单分页功能示例
这篇文章主要介绍了JS实现的简单分页功能,涉及javascript事件响应及页面元素遍历、动态构造等相关操作技巧,需要的朋友可以参考下
2018-08-08
全面解析Bootstrap中tooltip、popover的使用方法
这篇文章主要为大家详细解析了Bootstrap中tooltip、popover的使用方法，了解提示框、弹出框的实现原理，感兴趣的朋友可以参考一下
2016-06-06
深入理解JavaScript和TypeScript中的class
class 声明创建一个基于原型继承的具有给定名称的新类，下面这篇文章主要给大家介绍了关于JavaScript和TypeScript中class的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下。
2018-04-04
微信小程序实现计算器小功能
这篇文章主要为大家详细介绍了微信小程序实现计算器小功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-07-07
JavaScript获取时间戳的方法总结
JavaScript获得时间戳的方法有五种,后四种都是通过实例化时间对象new Date() 来进一步获取当前的时间戳,下面我们就一起学习一下具体获取的方法吧
2023-09-09
JavaScript实现拖拽效果
这篇文章主要为大家详细介绍了JavaScript实现拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-03-03