keyCode charCode 详解

本文详细解析了键盘事件中的keyCode与charCode属性的区别及应用。在不同浏览器环境下,如IE、Firefox和Chrome中,这些属性的表现有所不同。文章通过实例展示了如何正确获取用户输入的字符或按键。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

keyCode charCode 详解

键盘事件拥有两个属性,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事件(具体原因见我的另一篇文章)。

在谷歌中会得到
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> 

typedef __packed struct { unsigned char code0; unsigned char code1; unsigned char code2; unsigned char type; }KEYCODE_sTypeDef; //------------------- typedef __packed struct { unsigned char coord_r; unsigned char coord_c; } LEDCOORD_sTypeDef,KEYCOORD_sTypeDef; typedef __packed union { LEDCOORD_sTypeDef structure; unsigned short coord; unsigned char array[2]; }LEDCOORD_uTypeDef,KEYCOORD_uTypeDef; typedef __packed union { u32 bufferU32_6x21[6][21]; KEYCODE_uTypeDef structure_6x21[6][21]; u8 bufferU8[126*4]; }KeyMatrixAP_uTypeDef0; typedef __packed struct { KeyMatrixAP_uTypeDef0 normMatrix; KeyMatrixAP_uTypeDef0 FnFuctionMatrix; unsigned char reserve[1024-(126*4)-(126*4)-4]; unsigned int cs; }CONFPARAM1_sTypedef; typedef union { CONFPARAM1_sTypedef structure; u32 bufferU32[256]; }CONFPARAM1_uTypedef; const CONFPARAM1_uTypedef Table_Param1_backup= { {// Layer 1 {// Layer 2 {// Layer 3 { KEY_C0R0, KEY_C1R0, KEY_C2R0, KEY_C3R0, KEY_C4R0, KEY_C5R0, KEY_C6R0, KEY_C7R0, KEY_C8R0, KEY_C9R0, KEY_C10R0, KEY_C11R0, KEY_C12R0, KEY_C13R0, KEY_C14R0, KEY_C15R0, KEY_C16R0, KEY_C17R0, KEY_C18R0, KEY_C19R0, KEY_C20R0 } , { KEY_C0R1, KEY_C1R1, KEY_C2R1, KEY_C3R1, KEY_C4R1, KEY_C5R1, KEY_C6R1, KEY_C7R1, KEY_C8R1, KEY_C9R1, KEY_C10R1, KEY_C11R1, KEY_C12R1, KEY_C13R1, KEY_C14R1, KEY_C15R1, KEY_C16R1, KEY_C17R1, KEY_C18R1, KEY_C19R1, KEY_C20R1 } , { KEY_C0R2, KEY_C1R2, KEY_C2R2, KEY_C3R2, KEY_C4R2, KEY_C5R2, KEY_C6R2, KEY_C7R2, KEY_C8R2, KEY_C9R2, KEY_C10R2, KEY_C11R2, KEY_C12R2, KEY_C13R2, KEY_C14R2, KEY_C15R2, KEY_C16R2, KEY_C17R2, KEY_C18R2, KEY_C19R2, KEY_C20R2 } , { KEY_C0R3, KEY_C1R3, KEY_C2R3, KEY_C3R3, KEY_C4R3, KEY_C5R3, KEY_C6R3, KEY_C7R3, KEY_C8R3, KEY_C9R3, KEY_C10R3, KEY_C11R3, KEY_C12R3, KEY_C13R3, KEY_C14R3, KEY_C15R3, KEY_C16R3, KEY_C17R3, KEY_C18R3, KEY_C19R3, KEY_C20R3 } , { KEY_C0R4, KEY_C1R4, KEY_C2R4, KEY_C3R4, KEY_C4R4, KEY_C5R4, KEY_C6R4, KEY_C7R4, KEY_C8R4, KEY_C9R4, KEY_C10R4, KEY_C11R4, KEY_C12R4, KEY_C13R4, KEY_C14R4, KEY_C15R4, KEY_C16R4, KEY_C17R4, KEY_C18R4, KEY_C19R4, KEY_C20R4 } , { KEY_C0R5, KEY_C1R5, KEY_C2R5, KEY_C3R5, KEY_C4R5, KEY_C5R5, KEY_C6R5, KEY_C7R5, KEY_C8R5, KEY_C9R5, KEY_C10R5, KEY_C11R5, KEY_C12R5, KEY_C13R5, KEY_C14R5, KEY_C15R5, KEY_C16R5, KEY_C17R5, KEY_C18R5, KEY_C19R5, KEY_C20R5 }, }, }, { { // {SKEYCODE_FactoryReset,0,SKEYCODE_LEDMODESET(0xe0),SKEYCODE_LEDMODESET(0xe1),SKEYCODE_LEDMODESET(0xe2),SKEYCODE_LEDMODESET(0xe3),SKEYCODE_LEDMODESET(0xe4),SKEYCODE_LEDMODESET(0xa0),SKEYCODE_LEDMODESET(0xa1),SKEYCODE_LEDMODESET(0xa2),SKEYCODE_LEDMODESET(0xa3),SKEYCODE_LEDMODESET(0xa4),SKEYCODE_LEDMODESET(0xa5),SKEYCODE_RECPIC,0,0,0,0,0,0}, // {0,KEYCODE_PrevTr,KEYCODE_PlayPause,KEYCODE_NextTr,KEYCODE_Mute,KEYCODE_VolumD,KEYCODE_VolumI,0,0,0,0,SKEYCODE_BrightnessDec,SKEYCODE_BrightnessInc,0,SKEYCODE_LEDMODELOOPSET,0,SKEYCODE_SpeedUp,0,0,0,0}, // {0,0,SKEYCODE_WinAltEx,0,0,0,0,0,0,0,0,0,SKEYCODE_ColorsLoop,0,SKEYCODE_GamingMode,0,SKEYCODE_SpeedDown,0,0,0,0}, // {0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0}, // {0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,SKEYCODE_DirectionSET(3),0,0,0,0,0}, // #ifdef Korean // {KEYCODE_K150_0X91,SKEYCODE_WinLock,0,0,0,0,0,0,0,0,0,0,0,0,SKEYCODE_DirectionSET(1),SKEYCODE_DirectionSET(2),SKEYCODE_DirectionSET(0),0,0,0,0}, // #else // {0,0,0,0,0,0,0,0,0,0,0,0,0,0,SKEYCODE_DirectionSET(1),SKEYCODE_DirectionSET(2),SKEYCODE_DirectionSET(0),0,0,0,0}, // #endif //{0,0,KEYCODE_MyComputer,KEYCODE_WWW,KEYCODE_Calculator,KEYCODE_Media,KEYCODE_PrevTr,KEYCODE_NextTr ,KEYCODE_PlayPause,KEYCODE_Mute,KEYCODE_VolumI,KEYCODE_VolumD,0,0,0,0,0,0,0,0,0}, {SKEYCODE_FactoryReset,0,KEYCODE_Media,KEYCODE_VolumD,KEYCODE_VolumI,KEYCODE_Mute,KEYCODE_Stop,KEYCODE_PrevTr ,KEYCODE_PlayPause,KEYCODE_NextTr,KEYCODE_Email,KEYCODE_WWW,KEYCODE_MyComputer,KEYCODE_Calculator,SKEYCODE_LEDOFF,0,SKEYCODE_LEDON,0,0,0,0}, {0,SKEYCODE_LEDMODESET(0xe0),SKEYCODE_LEDMODESET(0xe1),SKEYCODE_LEDMODESET(0xe2),SKEYCODE_LEDMODESET(0xe3),SKEYCODE_LEDMODESET(0xe4),0,0,0,0,0,0,0,0,SKEYCODE_LEDMODELOOPSET,SKEYCODE_RECPIC,0,0,0,0,0}, {0,0,0,0,0,0,0,0,0,0,0,0,0,0,SKEYCODE_ColorsLoop,0,0,0,0,0,0}, {0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0}, {0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,SKEYCODE_BrightnessInc,0,0,0,0,0}, {0,SKEYCODE_WinLock,0,0,0,0,0,0,0,0,0,0,0,0,SKEYCODE_SpeedDown,SKEYCODE_BrightnessDec,SKEYCODE_SpeedUp,0,0,0,0}, }, }, //----------------------------------------------------------- }, };讲解
最新发布
07-09
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值