关于键盘事件中keyCode、which和charCode 的兼容性测试

 
说在Firefox和IE下取到的keyCode不一样,在FF下不区分大小写键。
http://www.dodo.hk/article.asp?id=369
修改了下测试,想回复一下的,结果提示字数太多贴不了,就写到这吧:)

测试结果
在IE下:
>> 支持keyCode
>> 不支持which和charCode,二者值为 undefined

在Firefox下:
>> 支持keyCode,除功能键外,其他键值始终为 0
>> 支持which和charCode,二者的值相同

在Opera下:
>> 支持keyCode和which,二者的值相同
>> 不支持charCode,值为 undefined

测试代码
  1. <script type="text/javascript">
  2. //By 枫岩@CnLei.Com
  3. function $(s){
  4.   return document.getElementById(s)?document.getElementById(s):s;
  5. }
  6. function viewKeyInfo(e){
  7.   var currKey=0,CapsLock=0;
  8.   var e=e||event;
  9.   currKey=e.keyCode||e.which||e.charCode;
  10.   CapsLock=currKey >=65 && currKey <=90;
  11.   $("type").innerHTML=e['type'];
  12.   $("currKey").innerHTML=String.fromCharCode(currKey);
  13.   $("Decimal").innerHTML=currKey;
  14.   $("keyCode").innerHTML=e['keyCode'];
  15.   $("charCode").innerHTML=e['charCode'];
  16.   $("caps").innerHTML=CapsLock;
  17.   $("shiftKey").innerHTML=e['shiftKey'];
  18.   $("ctrlKey").innerHTML=e['ctrlKey'];
  19.   $("repeat").innerHTML=e['repeat'];
  20.   $("which").innerHTML=e['which'];
  21. }
  22. document.οnkeypress= viewKeyInfo;
  23. </script>
  24. <p>请按下任意键看测试效果:</p>
  25. type:<span id="type"></span><br />
  26. 当前Key:<span id="currKey"></span><br />
  27. Decimal:<span id="Decimal"></span><br />
  28. keyCode:<span id="keyCode"></span> <strong>注:在FF下,keyCode始终为0</strong><br />
  29. which:<span id="which"></span> <strong>注:在IE下,which始终为undefined ; 在Opera下,keyCode和charCode二者的值相同</strong><br />
  30. charCode:<span id="charCode"></span> <strong>注:在IE、Opera下,charCode始终为undefined ; 在FF下,which和charCode二者的值相同</strong><br />
  31. 大写:<span id="caps"></span><br />
  32. altKey:<span id="altKey"></span><br />
  33. ctrlKey:<span id="ctrlKey"></span><br />
  34. shiftKey:<span id="shiftKey"></span><br />
  35. repeat:<span id="repeat"></span><br />
  36. <style type="text/css" media="all">
  37. body {color:#999;font:normal 14px tahoma,宋体,Geneva,Arial,sans-serif;}
  38. span {color:#f00;font-weight:bold;padding:0 5px;}
  39. strong {color:#090;font-weight:normal;padding:0 5px;}
  40. </style>
<script type="text/javascript"><!-- google_ad_client = "pub-6770445892601887"; /* 468x60, 创建于 09-11-19 */ google_ad_slot = "4437639877"; google_ad_width = 468; google_ad_height = 60; //--> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值