0
点赞
收藏
分享

微信扫一扫

vue 全局响应键盘按键/监听键盘事件(含 js 获取键盘keyCode值的方法)


监听键盘事件

方法一

document.addEventListener("keydown",function(e){
alert("您按下的按钮的keyCode为:"+e.keyCode)
})

方法二

document.onkeydown = function (e) {
// 方向键--上
if (e.keyCode == 38) {
alert("按下了方向键--上")
}
// 方向键--下
if (e.keyCode == 40) {
alert("按下了方向键--下")
}
// 方向键--左
if (e.keyCode == 37) {
alert("按下了方向键--左")
}
// 方向键--右
if (e.keyCode == 39) {
alert("按下了方向键--右")
}
}

注意this的使用

调用methods的方法时,最好使用that,因为this在子路由或子组件中不能直接获取到

let that = this
document.addEventListener("keydown",function(e){
// 方向键--上
if (e.keyCode == 38) {
// 执行向上移动的方法
that.moveUP()
}
})

js 获取键盘keyCode值的方法

使用下方代码,可以在按下键盘时,即刻了解键盘对应的keyCode值

document.addEventListener("keydown",function(e){
alert("您按下的按钮的keyCode为:"+e.keyCode)
})

或 

document.onkeydown = function (e) {
alert("您按下的按钮的keyCode为:"+e.keyCode)
}

查表获取键盘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

数字键盘

按键

键值

按键

键值

按键

键值

按键

键值

0

96

8

104

F1

112

F9

120

1

97

9

105

F2

113

F10

121

2

98

*

106

F3

114

F11

122

3

99

+

107

F4

115

F12

123

4

100

Enter

108

F5

116

5

101

-

109

F6

117

6

102

.

110

F7

118

7

103

/

111

F8

119

控制键

按键

键值

按键

键值

按键

键值

按键

键值

Backspace

8

Esc

27

Right Arrow(->)

39

-_

189

Tab

9

Spacebar

32

Down 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

举报

相关推荐

0 条评论