`
pcajax
  • 浏览: 2157290 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

关于键盘事件中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.onkeypress= 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>
分享到:
评论

相关推荐

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

    键盘事件中keyCode、which和charCode的兼容性测试 在前端开发中,键盘事件是一个非常重要的事件类型,它可以捕捉用户在键盘上的输入操作。键盘事件中有三个关键属性:keyCode、which和charCode,这三个属性都是用于...

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

    asp.net控制键盘keycode事件

    以上就是关于“asp.net控制键盘keycode事件”的详细解释,希望能帮助你理解和掌握如何在ASP.NET环境中使用键盘事件和`keycode`。在实际开发中,可以根据需求灵活运用这些技术,创建更加智能化和响应式的Web应用。

    键盘 keycode的值 javascript时触发事件

    ### 键盘Keycode值与JavaScript触发事件 在前端开发中,经常需要处理用户的键盘输入事件,例如表单验证、...同时,随着Web技术的发展,使用更现代化的API如`event.key`和`event.code`可以提供更好的兼容性和用户体验。

    js扑捉键盘对应的keycode

    - **兼容性问题**:需要注意的是,在现代浏览器中,推荐使用 `event.key` 而不是 `event.keyCode`,因为后者已被废弃。 - **按键的区分**:某些按键在不同操作系统下的 `keyCode` 可能不同,例如 Windows 和 macOS ...

    键盘KeyCode值列表

    KeyCode是计算机程序设计中用于表示键盘按键的一个数值标识,通常被用在处理键盘输入事件的编程语言中,如JavaScript、Java、C#等。当用户按下键盘上的一个键时,操作系统会生成一个与该按键对应的KeyCode值,开发者...

    js键盘事件全面控制_兼容FireFox和IE

    在 FireFox 和 Opera 中,可以使用 e.which 属性来获取键盘事件对象,而在 IE 中,可以使用 event.keyCode 属性来获取键盘事件对象。例如: FireFox 和 Opera: ``` function keyDown(e) { var keycode = e.which;...

    键盘对应数字-keycode值大全

    在计算机编程领域,理解键盘按键与对应的KeyCode值对于事件处理至关重要。本文将详细介绍常见的键盘按键及其对应的KeyCode值,帮助开发者更好地掌握键盘输入事件。 #### 基本概念 - **KeyCode**:在计算机编程中,...

    javascript键盘事件大全event.keycode

    javascript键盘事件大全,最全的键盘事件event.keycode

    js键盘事件的keyCode

    总结来说,JavaScript中处理键盘事件的keyCode是捕捉用户按键操作的重要手段,但是随着Web技术标准的更新,现在更推荐使用key或code属性来获取按键信息。开发者应当根据实际需要选择合适的属性,并在编写代码时考虑...

    键盘 keycode的值 javascript时触发事件时很有用的要素

    因此,在跨浏览器开发中,可能需要进行特定的处理和兼容性测试。 另外,随着Web技术的发展,`event.code`和`event.key`属性也逐步成为处理键盘事件时的推荐属性。与`event.keyCode`不同,`event.code`提供了物理...

    Pb—KeyCode枚举值与键盘对照表

    在软件开发过程中,尤其是涉及到用户输入处理时,理解键盘按键与程序中的键码(KeyCode)之间的映射关系至关重要。本文将基于提供的“Pb—KeyCode枚举值与键盘对照表”,详细介绍各键盘按键对应的KeyCode值及其含义...

    Android 对应键盘KeyCode

    Android 对应键盘KeyCode,主要用于开发蓝牙键盘获取code值而存的

    键盘KeyCode对照表

    * 键盘事件处理:在编程中,我们需要判断用户按下的键盘按键,并执行相应的操作。KeyCode对照表可以帮助我们快速地判断按键,并执行相应的操作。 * 键盘快捷键:在许多应用程序中,我们可以使用快捷键来快速执行某些...

    js键盘事件

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

Global site tag (gtag.js) - Google Analytics