java Script 中的keyCode 和charCode
其实很长一段时间，我都没有完全弄明白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的更多相关文章
- Java script 中的面向对象1
Java script 中的面向对象 对象 对象是Javascript的基本数据类型,对象是一种复合值,将很多的键值对聚合在一起使用.对象可看做是属性的无序集合,每个属性都是一个名/值对.属性名其实是 ...
- Java Script 中 ==（Equal) 和 === (Identity Equal) 的区别和比较算法逻辑
判断两个变量是否相等在任何编程语言中都是非常重要的功能. JavaScript 提供了 == 和 === 两种判断两个变量是否相等的运算符,但我们开始学习的时候 JavaScript 的时候,就被一遍 ...
- Java Script中常见操作
字符串常见操作:obj.length 长度obj.trim() 移除空白obj.trimLeft()obj.trimRight)obj.charAt(n) 返回字符串中的第n个字符obj.concat ...
- Java Script 学习笔记
JS编程习惯类: 1. 命名 著名的变量命名规则 只是因为变量名的语法正确,并不意味着就该使用它们.变量还应遵守以下某条著名的命名规则: Camel 标记法 首字母是小写的,接下来的字母都以大写字符开 ...
- Java Script 第二章.
对象: JavaScript中的所有事物都是对象:字符串,数组,数值,函数..... JavaScript中提供多个内建对象,比如说 String, Date, Array等等.对象只是带有属性和 ...
- 在ASP.Net环境中，当用户点击报表中的超链接时如何调用Java Script方法？
问题描述:在ASP.Net环境中,当用户点击报表中的超链接时如何调用Java Script方法? 问题解答: 你可以在TextObject.Hyperlink对象中编写js代码(javascript: ...
- javascript中keyCode与charCode属性
好记性不如烂笔头啊,最近总是忘记这两个属性的区别.想了想,从别人博客上转一遍过来吧,时常看下 键盘事件拥有两个属性,keyCode和CharCode,他们之间有一些不一样之处.keyCode表示用户按 ...
- Java Script 基础
一. JS的简介 JavaScript是一种网页编程技术,经常用于创建动态交互网页 JavaScript是一种基于对象和事件驱动的解释性脚本语言,类似C语言和Java的语法 事先不编译:逐行执行:无需 ...
- keyCode 与charCode
键盘事件拥有两个属性,keyCode和CharCode,他们之间有一些不一样之处.keyCode表示用户按下键的实际的编码,而charCode是指用户按下字符的编码. IE下 keyCode:对于ke ...
随机推荐
- java编辑器
package editor; import java.io.*; import java.awt.*; import java.awt.datatransfer.Clipboard; import ...
- 走进Groovy （二）
承接上一篇,配置好环境后,开始正式学习语法.我假设看此文的同学至少会一定的JAVA语法,因此一些太过基础的就不记录了,基本上,大家看看示例就明白了. Groovy的卖点之一,就是全兼容JAVA的语法, ...
- 51nod 1239 欧拉函数之和（杜教筛）
[题目链接] https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1239 [题目大意] 计算欧拉函数的前缀和 [题解] 我们 ...
- 在 win 10 中使用sql 2012 附加低版本数据失败的解决办法。
随着win 10 的发布,我也尝试把自己的笔记本升级下,体验win10,由于自己电脑好长时间没有管理过,东西比较乱,一激动就格式了硬盘.但是所有的资料都丢失了,不过我都提前备份到网盘上.好了,废话不多 ...
- 用jersey ＋ spring 实现rest服务及单元测试
jersey提供了强大的rest功能,可以通过简洁的标注和编码实现业务的需求,架构会透明的把你的pojo对象转化为客户端可以接受的json/xml文件模式,当然也可以用它做一些基于ajax的表单提交和 ...
- Core Data Stack学习笔记
Entity Entities 实体->数据表一个实体可以表示一个数据模型 1> 通过图形化界面可以建立一个模型关系图,可以指定一对多,多对一,多对多的数据关系 -在数据库开发中,少用多对 ...
- XGPush集成（信鸽集成）demo
#import "AppDelegate.h" #import "XGPush.h" #import "XGSetting.h" #defi ...
- JavaSE复习日记 : Java操作符\关系运算符\逻辑运算符\赋值运算符\字符串连接符\三元运算符
// Java操作符\关系运算符\逻辑运算符\赋值运算符\字符串连接符\三元运算符 /* * 一 Java操作符 * * Java操作符都有哪些? * +, -, *, /, %, ++, -- * ...
- BZOJ 1834: [ZJOI2010]network 网络扩容(最大流+最小费用最大流)
第一问直接跑最大流.然后将所有边再加一次,费用为扩容费用,容量为k,再从一个超级源点连一条容量为k,费用为0的边到原源点,从原汇点连一条同样的边到超级汇点,然 后跑最小费用最大流就OK了. ---- ...
- Hadoop学习笔记（1）概述
写在学习笔记之前的话: 寒假已经开始好几天了,似乎按现在的时间算,明天就要过年了.在家的这几天,该忙的也都差不多了,其实也都是瞎忙.接下来的几点,哪里也不去了,静静的呆在家里学点东西.所以学习一下Ha ...