键盘事件拥有两个属性,
keyCode
和
CharCode
,他们之间有一些不一样之处。
keyCode
表示用户按下键的实际的编码,而
charCode
是指用户按下字符的编码。
IE
下
keyCode
:对于
keypress
事件,表示按下按键的
Unicode
字符;对于
keydown/keyup
事件,表示按下按键的数字代码。
无
charCode
属性。
DOM
标准下
keyCode
:表示按下按键的数字代码。
charCode
:按下按键的
Unicode
字符。
当我按下
“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
事件(具体原因见我的另一篇文章
http://hi.baidu.com/duxiaokong/blog/item/99864d52a27a812842a75b8d.html
)。
在谷歌中会得到
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
(其他浏览器)
。
参考资料:
http://quirksmode.org/dom/events/keys.html
附测试代码:
<!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>
分享到:
相关推荐
在JavaScript中,键盘事件处理是常见的交互方式,其中`keyCode`和`charCode`是两个重要的属性,它们分别表示不同的编码信息。这篇文章将深入解析这两个属性的区别和应用场景。 `keyCode`是一个代表物理按键的整数值...
在阅读本文前,相信大家应该都有所了解,在js获取键盘按下的键值有:event.keyCode、event.charCode和event.which。 其中: 谷歌浏览器:对event.keyCode、event.charCode和event.which都兼容。 火狐浏览器:对event...
` 这行代码则是为了兼容不同的浏览器特性,其中`e.keyCode` 主要用于IE浏览器,而 `e.which` 和 `e.charCode` 则主要用于Firefox和其他浏览器。 #### 三、实践应用示例 ##### 1. 键盘事件捕获 ```javascript ...
上面的示例代码中,通过`theEvent.keyCode`、`theEvent.which`以及`theEvent.charCode`分别获取了不同浏览器环境下的按键码。 - **`keyCode`**:适用于大多数情况,但在某些浏览器(如Firefox)中可能无法区分某些...
### Linux内核之input子系统详解 #### 一、Input 输入子系统框架 Linux内核中的input子系统是一个非常重要的组成部分,它负责管理和处理来自各种输入设备的数据,例如键盘、鼠标、触摸屏等。该子系统的高效性和...
event.charCode = (event.type === 'keypress') ? event.keyCode : 0; event.eventPhase = 2; // IE 只支持冒泡 event.isChar = (event.charCode > 0); event.pageX = event.clientX + document.body.scrollLeft...
它可以标准化不同浏览器的event.keyCode和event.charCode的差异,返回一个数值来代表按键。例如,鼠标左键单击时event.which返回1,中间键返回2,右键返回3。 6. this 和 event.target 的区别 在jQuery事件处理函数...
console.log("Key pressed:", String.fromCharCode(e.charCode)); }; ``` #### 目标属性 (`target`) 此外,在HTML元素中还可以设置`target`属性来控制链接或表单提交后新页面的打开方式: 1. **`_blank`**:在...
e.keyCode = e.which = e.charCode; if (e.keyCode == 13 || e.keyCode == 10) { if (txt.value == "") { alert("请勿发送空内容"); } else { var son = document.createElement("p"); son.style....
### 嵌入式系统中的红外遥控附加功能详解 #### 摘要 红外线遥控技术作为一种广泛应用的远程控制手段,在各种嵌入式系统中扮演着重要的角色。本文旨在介绍如何在嵌入式系统中集成红外遥控功能,重点讨论了红外信号的...