JavaScript Event学习第十一章 按键的检测
正如我们了解到的，浏览器在最开始设计的时候并没有一个标准，大家都像做实验似的，最后的成品虽然是有用的，但是肯定造成了兼容性的问题。按键问题也不例外：这里有两个属性能检测到用户按下了什么键，虽然有足够的理由为什么需要两个属性，但是依然并不是所有的浏览器都支持。
另外，在keypress与keydown和keyup之间还有一些很重要的区别。
最后就是windows和mac的区别了，在mac上要检测用户按下了什么键简直比在windows下难了N倍。
keyCode和charCode
能检测到用户按下了什么键的两个属性就是keyCode和charCode了。简单说来：keyCode是用来检测用户真正按下了键盘上那个键的，而charCode则是给出键入字符的ASCII码。有一些小问题需要注意：大写的A和小写的a的keyCode是一样的，因为他们在键盘上就是一个键；但是charCode不一样，因为他俩是两个不同的字符。
IE和Opera不支持charCode。然而他们会在keyCode里面保存字符信息，但是只是在onkeypress的情况下，在onkeydown/up情况下包含的是键的信息。
字符和数字键
让我们以一个简单的例子开始。小写a的ASCII码是97，大写的是65。那么在两种情况下，当用户在键盘上敲下相同的键的时候，什么时候的键值是65呢（相当于大写的A）
keyCode
charCode
因此，在onkeydown/up的情况下，你能够从keyCode里面得到键值。在onkeypress情况下，想要得到字符值就要使用：evt.charCode || evt.keyCode.
标点符号
我还是决定不对标点符号键做测试了。我怀疑这不仅跟浏览器和操作系统有关，还可能跟键盘设置和默认语言有关。我一般用的是荷兰语版的windows，如果跟美国版的101键的键盘相比有很大出入，我一点都不会觉得意外。
比如说shift+,键出来的应该是<，但是我测试的ASCII码的结果却是'?'的。当我发现了这个问题，我决定还是不在标点符号键的问题上浪费时间了.
特别键
功能键就是只那些不能打印出来的但是却具有一定功能的键。比如shift、ESC、enter等等都是功能键。
一些说明：
1、一般，mac的可靠性比windows要差，有些键可能检测不到
2、IE不会触发下面这键的keypress事件：delete, end, enter, escape, 功能键, home, insert, pageUp/Down 和 tab。
3、在onkeypress事件下，Safari会给下面这些键给出很奇怪的keyCode值：delete, end, 功能键, home 和 pageUp.Down。但是在onkeydown/up下面就很正常。
4、Alt,Cmd,Ctrl和shfit键在mac上无法探测，不过Opera下面例外。然而你却可以使用altKey，ctrlKey，shfitKey这些属性。
如果你需要探测这些键，你就探测一下载onkeydown/up下面的keyCode就行了，算是给自己帮忙了，onkeypress和charCode就忘掉吧。
原文后面有个大的键值的列表，还有一个测试框，有兴趣的童鞋可以移步。
翻译地址：http://www.quirksmode.org/js/keys.html
转载请保留以下信息
作者：北玉(tw:@rehawk)
相关文章
与许多其他编程语言一样,JavaScript 也在不断发展,小编今天就为大家介绍ES13中添加的最新功能,并查看其用法示例以更好地理解它们,有需要的小伙伴可以了解下2023-09-09
这篇文章主要介绍了uniapp通过调用百度语音，实现录音转文字的功能。文中的示例代码对我们学习或工作有一定的帮助，感兴趣的小伙伴可以跟随小编学习一下2021-12-12
本文主要讲解的是V8的技术，是V8的入门篇，主要目的是了解V8的内部机制，希望对前端，快应用，浏览器，以及nodejs同学有些帮助。这里不涉及到如何编写优秀的前端，只是对JS内部引擎技术的讲解2021-06-06
这篇文章主要介绍了vue渲染大量数据时发生卡顿卡死问题时的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
javascript 实现文本使用省略号替代（超出固定高度的情况）
这篇文章主要介绍了javascript 实现文本使用省略号替代（超出固定高度的情况）的相关资料,需要的朋友可以参考下2017-02-02
这篇文章主要介绍了js定时调用方法成功后并停止调用的实现,需要的朋友可以参考下2014-04-04
这篇文章主要介绍了JavaScript中layim之整合右键菜单的示例代码,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-02-02
原生javascript无间缝滚动目前支持的是竖向与横向滚动，下面有个不错的示例，大家可以参考下2014-01-01
这篇文章主要介绍了微信小程序实现定位及到指定位置导航的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
在使用layui加载后端数据请求时,对数据选项框进行双击即可实现数据的输入编辑更改,本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-12-12
最新评论