检测键盘按键信息及键码值对应介绍

Javascript中有3个事件句柄在对应键盘的输入状态:keydown、keypress和keyup。
分别对应的意思是:按键被按下(按下按键但还没有抬起)、点击按键(按下并抬起按键)、按键抬起(按键抬起之后)
按键的分类
按键可以分为“实键”和“虚键”
实键可以理解为我们能够看到并打印出来的按键,如字母“A”、数字“1”、字符“?”等等
虚键就是那些无法打印出来起到控制作用的按键,如“Ctrl”、“Alt”、“Shift”、“方向键”等等
IE在处理虚键时有个特例:虚键不会产生keypress事件,必须使用keydown或keyup来捕获
按键码和字符码
按键码是计算机用来识别不同按键的编码,每一个按键都有按键码
字符码是可被打印的实键特有的,对应了键盘上显示的字符
按键码可以使用String.fromCharCode()转换为字符码
按键码和和字符码的对应表可以在本文最后找到。
获取实键

其实很长一段时间,我都没有完全弄明白keyCode 和charCode
,自己也认真看过,但是就是理解不透彻,为了防止以后再出现混乱,写篇博客记录一下吧!

复制代码 代码如下:

首先  在不同的浏览器中,他们有不同的说法哦。

function getKeyCode(e) {
var keyCode = 0;
var e = e || window.event;
keyCode = e.keyCode || e.which || e.charCode;
alert(keyCode);
}

IE   keyCode  IE浏览器中event对象的属性(方法),

稍微解释下
1.
e为Firefox等标准浏览器支持的JS隐藏变量,表示一个“事件”;IE系列中没有“e”,而是用window.event来表示“事件”;所以var
e = e || window.event;就表示:获取当前正在发生的事件。
2.
e.keyCode、e.which、e.charCode都代表获取按键码,但不同的浏览器支持不同的写法
获取虚键

                    类型:Integer      可读写    

复制代码 代码如下:

                  
描述:对于keypress事件,指示按下的键的Unicode字符;对于keyup\keydown
事件,指示按下的键盘是数字表示键。

function getKeyCode(e) {
var keyCode = 0;
var e = e || window.event;
if (e.ctrlKey) alert(“ctrlKey pressed”);
if (e.altKey) alert(“altKey pressed”);
if (e.shiftKey) alert(“shiftKey pressed”);
}

/*获取键盘的keycode 值*/
        document.onkeydown=function(event){
            var event=event||window.event;
           
document.getElementById(“showZone”).innerHTML=event.keyCode;
        };

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

DOM   keyCode  DOM浏览器中event对象的属性(方法),

按键

                    类型:Integer      可读写    

键码

                    描述:指示按下的键盘的数字表示键。

按键

         charCode   DOM浏览器中event对象的属性(方法),

键码

                    类型:Integer      可读  

按键

                    描述:指示按下的键的Unicode字符值;

键码

 

按键

 

键码

/**完整测试代码/

A

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
    <meta http-equiv=”Content-Type” content=”text/html;
charset=utf-8″ />
    <title>Key Events Example</title>
    <script type=”text/javascript”>
        function handleEvent(oEvent) {
            var oTextbox = document.getElementById(“txt1”);
            oTextbox.value += “\n>” + oEvent.type; 
//获取事件的类型
            oTextbox.value += “\n    target is ” + (oEvent.target ||
oEvent.srcElement).id;    //获取引起该事件的元素/对象
//Dom支持的是target,IE支持的是srcElement
            oTextbox.value += “\n    keyCode is ” + oEvent.keyCode;
            oTextbox.value += “\n    charCode is ” + oEvent.charCode;
//oTextbox.value += “\n    dxk is ” +
String.fromCharCode(oEvent.charCode);

65

            var arrKeys = [];
            if (oEvent.shiftKey) {
                arrKeys.push(“Shift”);
            }

J

            if (oEvent.ctrlKey) {
                arrKeys.push(“Ctrl”);
            }

74

            if (oEvent.altKey) {
                arrKeys.push(“Alt”);
            }

S

            oTextbox.value += “\n    keys down are ” + arrKeys;
        }
    </script>
</head>
<body>
<p>Type some characters into the first textbox.</p>
<p><textarea id=”txtInput” rows=”15″ cols=”50″
             onkeydown=”handleEvent(event)”
             onkeypress=”handleEvent(event)”
            
onkeyup=”handleEvent(event)”></textarea></p>
<p><textarea id=”txt1″ rows=”15″
cols=”50″></textarea></p>
</body>
</html>

83

 

1

 

49

参考资料:

B

当我按下“a键(注意是小写的字母)时,

66

在火狐中会得到
keydown:keyCode is 65  charCode is 0

K

keypress:keyCode is 0   charCode is 97

75

keyup:  keyCode is 65  charCode is 0

T

在谷歌中会得到
keydown:keyCode is 65  charCode is 0

84

keypress:keyCode is 97  charCode is 97

2

keyup:  keyCode is 65  charCode is 0

50

在IE中会得到
keydown:keyCode is 65  charCode is undefined

C

keypress:keyCode is 97  charCode is undefined

67

keyup:  keyCode is 65  charCode is undefined

L

 

76

而当我按下shift键时,

U

在火狐中会得到
keydown:keyCode is 16  charCode is 0

85

keyup:  keyCode is 16   charCode is 0

3

不会得到任何的charCode值,因为按shift并没输入任何的字符,而且也不会触发keypress事件(具体原因见我的另一篇文章)。

51

在谷歌中会得到
keydown:keyCode is 16  charCode is 0

D

keyup:  keyCode is 16   charCode is 0

68

在IE中会得到
keydown:keyCode is 16  charCode is undefined

M

keyup:  keyCode is 16   charCode is undefined

77

 

V

小结:在keydown事件里面,事件包含了keyCode –
用户按下的按键的物理编码。在keypress里,keyCode包含了字符编码,即表示字符的ASCII码。这样的形式适用于所有的浏览器
– 除了火狐,它在keypress事件中的keyCode返回值为0。

86


如果你想获取用户实际敲击的按钮,用keydown事件来获取事件对象,并获取keyCode值,这在所有浏览器都行的通。另一方面,如果你想获取用户输
入的字符,那么就使用keypress来获取,然后获取charCode(火狐和safari)或是keyCode(其他浏览器)。

4

 

52

 

E

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

69

按键

N

键码

78

按键

W

键码

87

按键

5

键码

53

按键

F

键码

70

A

O

65

79

J

X

74

88

S

6

83

54

1

G

49

71

B

P

66

80

K

Y

75

89

T

7

84

55

2

H

50

72

C

Q

67

81

L

Z

76

90

U

8

85

56

3

I

51

73

D

R

68

82

M

0

77

48

V

9

86

57

4

  

52

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

E

功能键键码值(keyCode)

69

按键

N

键码

78

按键

W

键码

87

按键

5

键码

53

按键

F

键码

70

0

O

96

79

8

X

104

88

F1

6

112

54

F7

G

118

71

1

P

97

80

9

Y

105

89

F2

7

113

55

F8

H

119

72

2

Q

98

81

*

Z

106

90

F3

8

114

56

F9

I

120

73

3

R

99

82

+

0

107

48

F4

9

115

57

F10

 

121

 

4

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

100

功能键键码值(keyCode)

Enter

按键

108

键码

F5

按键

116

键码

F11

按键

122

键码

5

按键

101

键码

0

109

96

F6

8

117

104

F12

F1

123

112

6

F7

102

118

.

1

110

97

 

9

 

105

 

F2

 

113

7

F8

103

119

/

2

111

98

 

*

 

106

 

F3

 

114

  

F9

控制键键码值(keyCode)

120

按键

3

键码

99

按键

+

键码

107

按键

F4

键码

115

按键

F10

键码

121

BackSpace

4

8

100

Esc

Enter

27

108

Right Arrow

F5