转：浅谈JavaScript中按键事件的e.keyCode || e.which || e.charCode

1、浏览器的按键事件

浏览器有3种按键事件——keydown，keypress和keyup，分别对应onkeydown、onkeypress和onkeyup3个事件句柄。

一个典型的按键会产生所有这三种事件，依次是keydown-->keypress-->keyup。

 1 <input type="text" id="text">
 2 <script>
 3     document.getElementById("text").onkeypress = function() {
 4         console.log("keypress");
 5     };
 6     document.getElementById("text").onkeyup = function() {
 7         console.log("keyup");
 8     };
 9     document.getElementById("text").onkeydown = function() {
10         console.log("keydown");
11     };
12 script>

控制台输出：

keydown
keypress
keyup

 

2、浏览器的兼容性

(1)FireFox、Opera、Chrome

事件对应的函数有一个隐藏的变量e，表示发生事件。

e有一个属性e.which指示哪个键被按下，给出该键的索引值（按键码）。

静态函数String.fromCharCode()可以把索引值（按键码）转化成该键对应的的字符。

1 <input type="text" id="text">
2 <script>
3     document.getElementById("text").onkeypress = function(e) {
4         alert("按键码: " + e.which + " 字符: " + String.fromCharCode(e.which));    
5     };
6 script>

FireFox、Opera、Chrome中输入：a

输出：按键码：97 字符：a

 

(2)IE

IE不需要e变量，window.event表示发生事件。

window.event有一个属性window.event.keyCode指示哪个键被按下，给出该键的索引值（按键码）。

静态函数String.fromCharCode()可以把索引值（按键码）转化成该键对应的的字符。

eg：

1 <input type="text" id="text">
2 <script>
3     document.getElementById("text").onkeypress = function() {
4         alert("按键码: " + window.event.keyCode + " 字符: " + String.fromCharCode(window.event.keyCode));    
5     };
6 script>

IE中输入：a

输出：按键码：97 字符：a  

 

3、判断浏览器类型
利用navigator对象的appName属性。

IE：navigator.appName=="Microsoft Internet Explorer"

FireFox、Opera、Chrome：navigator.appName=="Netscape"

eg：

1 <input type="text" id="text">
2 <script>
3     document.getElementById("text").onkeypress = function(e) {
4         if (navigator.appName == "Microsoft Internet Explorer") 
5             alert("按键码: " + window.event.keyCode + " 字符: " + String.fromCharCode(window.event.keyCode)); 
6         else if (navigator.appName == "Netscape") 
7             alert("按键码: " + e.which + " 字符: " + String.fromCharCode(e.which));     
8     };
9 script>

IE、FireFox、Opera、Chrome中输入：a

输出：按键码：97 字符：a

简化的写法：

1 <input type="text" id="text">
2 <script>
3     document.getElementById("text").onkeypress = function(e) {
4         e = e || window.event;
5         key = e.keyCode || e.which || e.charCode;
6         alert("按键码: " + key + " 字符: " + String.fromCharCode(key));     
7     };
8 script>

说明：IE只有keyCode属性，FireFox中有which和charCode属性，Opera中有keyCode和which属性，Chrome中有keyCode、which和charCode属性。

 

转载自：https://blog.csdn.net/zhouziyu2011/article/details/53978293

 

 

 

keyCode对应的键值对：

 1 keycode    8 = BackSpace BackSpace
 2 keycode    9 = Tab Tab
 3 keycode   12 = Clear
 4 keycode   13 = Enter
 5 keycode   16 = Shift_L
 6 keycode   17 = Control_L
 7 keycode   18 = Alt_L
 8 keycode   19 = Pause
 9 keycode   20 = Caps_Lock
10 keycode   27 = Escape Escape
11 keycode   32 = space space
12 keycode   33 = Prior
13 keycode   34 = Next
14 keycode   35 = End
15 keycode   36 = Home
16 keycode   37 = Left
17 keycode   38 = Up
18 keycode   39 = Right
19 keycode   40 = Down
20 keycode   41 = Select
21 keycode   42 = Print
22 keycode   43 = Execute
23 keycode   45 = Insert
24 keycode   46 = Delete
25 keycode   47 = Help
26 keycode   48 = 0 equal braceright
27 keycode   49 = 1 exclam onesuperior
28 keycode   50 = 2 quotedbl twosuperior
29 keycode   51 = 3 section threesuperior
30 keycode   52 = 4 dollar
31 keycode   53 = 5 percent
32 keycode   54 = 6 ampersand
33 keycode   55 = 7 slash braceleft
34 keycode   56 = 8 parenleft bracketleft
35 keycode   57 = 9 parenright bracketright
36 keycode   65 = a A
37 keycode   66 = b B
38 keycode   67 = c C
39 keycode   68 = d D
40 keycode   69 = e E 
41 keycode   70 = f F
42 keycode   71 = g G
43 keycode   72 = h H
44 keycode   73 = i I
45 keycode   74 = j J
46 keycode   75 = k K
47 keycode   76 = l L
48 keycode   77 = m M 
49 keycode   78 = n N
50 keycode   79 = o O
51 keycode   80 = p P
52 keycode   81 = q Q
53 keycode   82 = r R
54 keycode   83 = s S
55 keycode   84 = t T
56 keycode   85 = u U
57 keycode   86 = v V
58 keycode   87 = w W
59 keycode   88 = x X
60 keycode   89 = y Y
61 keycode   90 = z Z

参考文章：https://blog.csdn.net/lyj787505955/article/details/38560101

 

注：JavaScript只提供对键盘的监听事件，它无法获取客户端硬件信息(IE下可以通过ActiveXObject对象获得)，更无法获得客户端硬件的状态，这是JavaScript语言的限制，所以它只能监听用户对键盘的响应事件，才能判断用户当前的按键是处于大小还是小写状态。目前网络上所有判断大小写都是监听用户的按钮才能得以判断。

也就是说，只能通过检测键盘按下时所获取到的字母大小写的keycode值，才能判断键盘此时的CapsLock键是否开启，而无法直接对CapsLock键的状态进行判断。