`
ygsilence
  • 浏览: 336783 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

keyCode charCode 详解

    博客分类:
  • JS
js 
阅读更多

键盘事件拥有两个属性, 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>

分享到:
评论

相关推荐

    keyCode和charCode详解

    在JavaScript中,键盘事件处理是常见的交互方式,其中`keyCode`和`charCode`是两个重要的属性,它们分别表示不同的编码信息。这篇文章将深入解析这两个属性的区别和应用场景。 `keyCode`是一个代表物理按键的整数值...

    js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解

    在阅读本文前,相信大家应该都有所了解,在js获取键盘按下的键值有:event.keyCode、event.charCode和event.which。 其中: 谷歌浏览器:对event.keyCode、event.charCode和event.which都兼容。 火狐浏览器:对event...

    js键盘事件

    ` 这行代码则是为了兼容不同的浏览器特性,其中`e.keyCode` 主要用于IE浏览器,而 `e.which` 和 `e.charCode` 则主要用于Firefox和其他浏览器。 #### 三、实践应用示例 ##### 1. 键盘事件捕获 ```javascript ...

    js回车事件绑定.txt

    上面的示例代码中,通过`theEvent.keyCode`、`theEvent.which`以及`theEvent.charCode`分别获取了不同浏览器环境下的按键码。 - **`keyCode`**:适用于大多数情况,但在某些浏览器(如Firefox)中可能无法区分某些...

    Linux内核之input子系统详解

    ### Linux内核之input子系统详解 #### 一、Input 输入子系统框架 Linux内核中的input子系统是一个非常重要的组成部分,它负责管理和处理来自各种输入设备的数据,例如键盘、鼠标、触摸屏等。该子系统的高效性和...

    javascript大事处理模型实例说明_.docx

    event.charCode = (event.type === 'keypress') ? event.keyCode : 0; event.eventPhase = 2; // IE 只支持冒泡 event.isChar = (event.charCode &gt; 0); event.pageX = event.clientX + document.body.scrollLeft...

    jQuery事件对象的属性和方法详解

    它可以标准化不同浏览器的event.keyCode和event.charCode的差异,返回一个数值来代表按键。例如,鼠标左键单击时event.which返回1,中间键返回2,右键返回3。 6. this 和 event.target 的区别 在jQuery事件处理函数...

    javaScript鼠标键盘事件

    console.log("Key pressed:", String.fromCharCode(e.charCode)); }; ``` #### 目标属性 (`target`) 此外,在HTML元素中还可以设置`target`属性来控制链接或表单提交后新页面的打开方式: 1. **`_blank`**:在...

    js实现聊天对话框

    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....

    嵌入式系统中的红外遥控附加功能

    ### 嵌入式系统中的红外遥控附加功能详解 #### 摘要 红外线遥控技术作为一种广泛应用的远程控制手段,在各种嵌入式系统中扮演着重要的角色。本文旨在介绍如何在嵌入式系统中集成红外遥控功能,重点讨论了红外信号的...

Global site tag (gtag.js) - Google Analytics