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 相关文章推荐
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
Mar 27 Javascript
javascript中onmouse事件在div中失效问题的解决方法
Jan 09 Javascript
js重写alert控件(适合学习js的新手朋友)
Aug 24 Javascript
jQuery实现点击小图显示大图代码分享
Aug 25 Javascript
Javascript创建类和对象详解
May 31 Javascript
js单页hash路由原理与应用实战详解
Aug 14 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
Jan 17 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
Nov 13 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
Jul 29 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
Oct 15 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
Dec 10 Javascript
详解如何在Canvas中添加事件的方法
Apr 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+Mysql+jQuery实现发布微博程序 jQuery篇
2011/10/08 PHP
php获得用户ip地址的比较不错的方法
2014/02/08 PHP
完美的2个php检测字符串是否是utf-8编码函数分享
2014/07/28 PHP
php实现网站留言板功能
2015/11/04 PHP
PHP请求Socket接口测试实例
2016/08/12 PHP
php创建多级目录与级联删除文件的方法示例
2019/09/12 PHP
JavaScript中SQL语句的应用实现
2010/05/04 Javascript
js 分页全选或反选标识实现代码
2011/08/09 Javascript
flash遮住div问题的正确解决方法
2014/02/27 Javascript
网页禁用右键菜单和鼠标拖动选择方法小结
2015/02/25 Javascript
JavaScript 对象深入学习总结(经典)
2015/09/29 Javascript
详解javascript跨浏览器事件处理程序
2016/03/27 Javascript
jquery文字填写自动高度的实现方法
2016/11/07 Javascript
Bootstrop实现多级下拉菜单功能
2016/11/24 Javascript
Angular 4.x 路由快速入门学习
2017/05/03 Javascript
微信小程序之数据双向绑定与数据操作
2017/05/12 Javascript
Node.js使用Express.Router的方法
2017/11/14 Javascript
node.js之基础加密算法模块crypto详解
2018/09/11 Javascript
小程序实现新用户判断并跳转激活的方法
2019/05/20 Javascript
vue实现图片按比例缩放问题操作
2020/08/11 Javascript
[02:37]2018DOTA2亚洲邀请赛赛前采访 VP.no[o]ne心中最强SOLO是谁
2018/04/04 DOTA
Python将xml和xsl转换为html的方法
2015/03/10 Python
使用Python对IP进行转换的一些操作技巧小结
2015/11/09 Python
Django实现跨域请求过程详解
2019/07/25 Python
Python使用itchat模块实现群聊转发,自动回复功能示例
2019/08/26 Python
python shell命令行中import多层目录下的模块操作
2020/03/09 Python
基于virtualenv创建python虚拟环境过程图解
2020/03/30 Python
大学生学习生活的自我评价
2013/11/01 职场文书
班级道德讲堂实施方案
2014/02/24 职场文书
计生工作先进事迹
2014/08/15 职场文书
运动会加油稿50字
2015/07/21 职场文书
2016寒假社会实践心得体会范文
2015/10/09 职场文书
请假条应该怎么写?
2019/06/24 职场文书
经典哲理警句:志不真则心不热,心不热则功不贤
2019/11/14 职场文书
python模块与C和C++动态库相互调用实现过程示例
2021/11/02 Python
解决Redis启动警告问题
2022/02/24 Redis