码迷,mamicode.com
首页 > 编程语言 > 详细

javascript之键盘事件的方法

时间:2017-07-14 18:49:20      阅读:206      评论:0      收藏:0      [点我收藏+]

标签:eal   ring   完全   键值   java   lock   文本   cap   按键   

键盘事件包含onkeydown、onkeypress和onkeyup这三个事件

事件初始化

function keyDown(){} document.onkeydown = keyDown; //论按下键盘上的哪个键,都将调用KeyDown()函数。

DOM标准下

function keyDown(e) {   var keycode = e.which; //取得对应的键值(数字)   var realkey = String.fromCharCode(e.which); //取得代表改键的真正字符   alert("按键码: " + keycode + " 字符: " + realkey);    }   document.onkeydown = keyDown

IE下

function keyDown() {       var keycode = event.keyCode; //IE下取得键值的方法       var realkey = String.fromCharCode(event.keyCode);       alert("按键码: " + keycode + " 字符: " + realkey);    }    document.onkeydown = keyDown

兼容的方法

function keyUp(e) {      var currKey=0,e=e||event;      currKey=e.keyCode||e.which||e.charCode;      var keyName = String.fromCharCode(currKey);      alert("按键码: " + currKey + " 字符: " + keyName);    }    document.onkeyup = keyUp;

使用原则:keydown事件对于功能按键来说是最有用的,而keypress事件对于可打印按键来说是最有用的

以下键码值只有在文本框中才完全有效,如果在

标记中使用,只有字母键、数字键和部分控制键可用,其字母键和数字键的键值与ASCII值相同

字母和数字键的键码值(keyCode)

按键 键码

A 65

B 66

C 67

D 68

E 69

F 70

G 71

H 72

I 73

J 74

K 75

L 76

M 77

N 78

O 79

P 80

Q 81

R 82

S 83

T 84

U 85

V 86

W 87

X 88

Y 89

Z 90

0 48

1 49

2 50

3 51

4 52

5 53

6 54

7 55

8 56

9 57

数字键盘上的键的键码值(keyCode) 功能键键码值(keyCode)

按键 键码

0 96

1 97

2 98

3 99

4 100

5 101

6 102

7 103

8 104

9 105

* 106

+ 107

Enter 108

- 109

. 110

/ 111

F1 112

F2 113

F3 114

F4 115

F5 116

F6 117

F7 118

F8 119

F9 120

F10 121

F11 122

F12 123

控制键键码值(keyCode)

按键 键码

BackSpace 8

Esc 27

Right Arrow 39

Left Arrow 37

Down Arrow 40

Up Arrow 38

-_ 189

.> 190

Spacebar 32

Tab 9

Clear 12

Page Up 33

Page Down 34

Enter 13

Insert 45

;: 186

Delete 46

`~ 192

/? 191

Num Lock 144

Control 17

Home 36

End 35

Shift 16

[{ 219

}] 221

\| 220

=+ 187

,

‘" 222

Cape Lock 20

Alt 18

javascript之键盘事件的方法

标签:eal   ring   完全   键值   java   lock   文本   cap   按键   

原文地址:http://www.cnblogs.com/2881064178dinfeng/p/7171717.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!