JS实现键盘监听

奋飛

发布于 2019-08-15 16:11:31

7K0

发布于 2019-08-15 16:11:31

文章被收录于专栏：Super 前端Super 前端

本文链接：https://ligang.blog.csdn.net/article/details/44467477

项目中要监听键盘组合键CTRL+C，以便做出对应的响应。查了一些方法但是其兼容性和稳定性不是很高，最终得到如下方法，经测试在Firfox、Chrome、IE中均

一、使用javascript实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function keyListener(event){
				if (event.ctrlKey && event.keyCode === 86){
				   	alert('你按下了CTRL+V');
			   }
			}
		</script>
	</head>

	<body>
		Ctrl+V:<textarea οnkeydοwn="keyListener(event);">粘贴粘贴</textarea>
	</body>

</html>

二、使用jquery实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="http://tztest4.ptmind.cn/js/jquery-1.8.0.min.js?v=3/11"></script>
		<script>
			$(function(){
				$("#aaa").keyup(function(event){
				 	if (event.ctrlKey && event.keyCode === 67){
					   	alert('你按下了CTRL+C');
				   }
				});
				
			});
			/*
			 * $('input').keyup(function(){...});
			 * $('input').bind('keyup', function(){...});
			 * $('input').live('keyup', function(){...});
			 */
		</script>
	</head>

	<body>
		Ctrl+C:<textarea id="aaa">复制复制</textarea> <br />
	</body>

</html>

三、说明 event.ctrlKey 功能：检测事件发生时Ctrl键是否被按住了。语法：event.ctrlKey 取值：true | false 1|0 说明： ctrlKey属性为true表示事件发生时Ctrl键被按下并保持，为false则Ctrl键没有按下。 ctrlKey属性可结合鼠标或键盘使用，多用于制作一些快捷操作方式。

四、详细keyCode值列表：

字母和数字键的键码值(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

数字键盘上的键的键码值(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
收藏

五、参考地址：

http://blog.csdn.net/zyz511919766/article/details/7349034 http://uule.iteye.com/blog/798394

http://www.cnblogs.com/shipengzhi/articles/2035010.html

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2015年03月19日，如有侵权请联系 cloudcommunity@tencent.com 删除

http

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

http

登录后参与评论

0 条评论

热度