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

java Script 中的keyCode 和charCode

时间:2015-05-24 20:16:58      阅读:147      评论:0      收藏:0      [点我收藏+]

标签:

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

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

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

                    类型:Integer      可读写    

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

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

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

                    类型:Integer      可读写    

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

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

                    类型:Integer      可读  

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

 

 

/**完整测试代码/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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);

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

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

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

            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>

 

 

参考资料:http://blog.csdn.net/yezhouyong/article/details/8991540

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

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

keypress:keyCode is 0   charCode is 97

keyup:  keyCode is 65  charCode is 0

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

keypress:keyCode is 97  charCode is 97

keyup:  keyCode is 65  charCode is 0

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

keypress:keyCode is 97  charCode is undefined

keyup:  keyCode is 65  charCode is undefined

 

而当我按下shift键时,

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

keyup:  keyCode is 16   charCode is 0

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

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

keyup:  keyCode is 16   charCode is 0

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

keyup:  keyCode is 16   charCode is undefined

 

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

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

 

java Script 中的keyCode 和charCode

标签:

原文地址:http://www.cnblogs.com/autumn123/p/4526221.html

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