专栏首页Super 前端JS实现键盘监听

JS实现键盘监听

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

本文链接: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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • python网络爬虫(4)结构与基本概念

    嘘、小点声
  • python3解析库lxml

    lxml是python的一个解析库,支持HTML和XML的解析,支持XPath解析方式,而且解析效率非常高

    嘘、小点声
  • python网络爬虫(8)多媒体文件抽取

    回调函数中,count表示已下载的数据块,size数据块大小,total表示总大小。

    嘘、小点声
  • 或许是你应该了解的一些 ASP.NET Core Web API 使用小技巧

      在目前的软件开发的潮流中,不管是前后端分离还是服务化改造,后端更多的是通过构建 API 接口服务从而为 web、app、desktop 等各种客户端提供业务...

    梁规晓
  • python网络爬虫(7)爬取静态数据详解

    lxml用于解析解析网页HTML等源码,提取数据。一些参考:https://www.cnblogs.com/zhangxinqi/p/9210211.html

    嘘、小点声
  • python网络爬虫(1)静态网页抓取

    POST请求发送表单信息,密码不显示在URL中,数据字典发送时自动编码为表单形式。

    嘘、小点声
  • App 组件化/模块化之路——如何封装网络请求框架

    在 App 开发中网络请求是每个开发者必备的开发库,也出现了许多优秀开源的网络请求库。例如

    阳仔
  • pig脚本求和排序取TOP

    有一需求,在HDFS数据上分组聚合累加一列的值,汇总后排序取TOP,pig脚本思路如下:

    休辞醉倒
  • App 组件化/模块化之路——使用SDK的思路进行模块化设计接口

    在不久之前分享一篇《App 组件化/模块化之路——如何封装网络请求框架》文章介绍了我在项目中封装网络请求框架的思路。开发一个 App 会涉及到很多网络请求 AP...

    阳仔
  • 【原创干货】我是如何为公有云和XX联邦政府提供安全的Linux操作系统的解决方案的?

    我大约是在2012年左右时,在网络和私有云两大领域之外,又在操作系统领域得到一个非常有挑战的新机遇:为公司超过30万台的服务器提供安全的Linux操作系统解决方...

    王录华

扫码关注云+社区

领取腾讯云代金券