JavaScript Event学习第十一章 按键的检测


Posted in Javascript onFebruary 10, 2010

第一个问题是对于按键事件来说根本就没有标准,按照规范说的:包含键盘等输入设备的事件模型会在以后的DOM规范中作出解释。

正如我们了解到的,浏览器在最开始设计的时候并没有一个标准,大家都像做实验似的,最后的成品虽然是有用的,但是肯定造成了兼容性的问题。按键问题也不例外:这里有两个属性能检测到用户按下了什么键,虽然有足够的理由为什么需要两个属性,但是依然并不是所有的浏览器都支持。

另外,在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

JavaScript Event学习第十一章 按键的检测

 

charCode

JavaScript Event学习第十一章 按键的检测
因此,在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 相关文章推荐
js 第二代身份证号码的验证机制代码
May 12 Javascript
瀑布流布局并自动加载实现代码
Mar 12 Javascript
node.js中的fs.fsyncSync方法使用说明
Dec 15 Javascript
JS表的模拟方法
Feb 05 Javascript
JavaScript数组迭代器实例分析
Jun 09 Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
Aug 26 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
Oct 23 Javascript
详解maxlength属性在textarea里奇怪的表现
Dec 27 Javascript
浅谈JavaScript变量的自动转换和语句
Jun 12 Javascript
总结十个Angular.js由浅入深的面试问题
Aug 26 Javascript
BootStrap入门教程(二)之固定的内置样式
Sep 19 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
Dec 17 Javascript
JavaScript Event学习第十章 一些可替换的事件对
Feb 10 #Javascript
jQuery插件 tabBox实现代码
Feb 09 #Javascript
基于Jquery的简单&amp;简陋Tabs插件代码
Feb 09 #Javascript
JQUERY操作JSON实例代码
Feb 09 #Javascript
JQuery 获得绝对,相对位置的坐标方法
Feb 09 #Javascript
ExtJs 3.1 XmlTreeLoader Example Error
Feb 09 #Javascript
Javascript 获取链接(url)参数的方法[正则与截取字符串]
Feb 09 #Javascript
You might like
解析php中获取系统信息的方法
2013/06/25 PHP
详谈PHP面向对象中常用的关键字和魔术方法
2017/02/04 PHP
PHP unlink与rmdir删除目录及目录下所有文件实例代码
2018/02/07 PHP
thinkphp整合系列之极验滑动验证码geetest功能
2019/06/18 PHP
PHP中迭代器的简单实现及Yii框架中的迭代器实现方法示例
2020/04/26 PHP
Swoole源码中如何查询Websocket的连接问题详解
2020/08/30 PHP
Javascript 生成指定范围数值随机数
2009/01/09 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
2011/09/26 Javascript
自己写的Javascript计算时间差函数
2013/10/28 Javascript
Jquery取得iframe下内容的方法
2013/11/18 Javascript
javascript日期格式化示例分享
2014/03/05 Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
2014/04/06 Javascript
两种不同的方法实现js对checkbox进行全选和反选
2014/05/13 Javascript
javascript中String对象的slice()方法分析
2014/12/20 Javascript
JavaScript中的some()方法使用详解
2015/06/09 Javascript
jquery实现简单的遮罩层
2016/01/08 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
2016/01/27 Javascript
localStorage实现便签小程序
2016/11/28 Javascript
全面总结Javascript对数组对象的各种操作
2017/01/22 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
2017/10/27 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
2018/05/31 Javascript
优化Vue中date format的性能详解
2020/01/13 Javascript
Vue 3自定义指令开发的相关总结
2021/01/29 Vue.js
[02:10]DOTA2 TI10勇士令状玩法及不朽Ⅰ展示:焕新世界,如你所期
2020/05/29 DOTA
python获取指定目录下所有文件名列表的方法
2015/05/20 Python
Python实现批量检测HTTP服务的状态
2016/10/27 Python
Python微信企业号开发之回调模式接收微信端客户端发送消息及被动返回消息示例
2017/08/21 Python
Python 中如何实现参数化测试的方法示例
2019/12/10 Python
Pyspark获取并处理RDD数据代码实例
2020/03/27 Python
python实现简单文件读写函数
2021/02/25 Python
小学数学教学反思
2014/02/02 职场文书
会计系毕业生求职信
2014/05/28 职场文书
十七岁的单车观后感
2015/06/12 职场文书
承兑汇票延期证明
2015/06/23 职场文书
Vue+Flask实现图片传输功能
2022/04/01 Vue.js
详解SQL报错盲注
2022/07/23 SQL Server