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 相关文章推荐
屏蔽IE弹出&quot;您查看的网页正在试图关闭窗口,是否关闭此窗口&quot;的方法
Dec 31 Javascript
Jquery遍历checkbox获取选中项value值的方法
Feb 13 Javascript
JS中判断null、undefined与NaN的方法
Mar 26 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
Aug 15 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
Sep 17 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
Nov 01 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
Dec 02 Javascript
localStorage的黑科技-js和css缓存机制
Feb 06 Javascript
AngularJS创建一个上传照片的指令实例代码
Feb 24 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
Sep 30 Javascript
vue 点击展开显示更多(点击收起部分隐藏)
Apr 09 Javascript
JavaScript闭包相关知识解析
Oct 19 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/08/07 PHP
PHP采集静态页面并把页面css,img,js保存的方法
2014/12/23 PHP
php防止CC攻击代码 php防止网页频繁刷新
2015/12/21 PHP
使用ThinkPHP的自动完成实现无限级分类实例详解
2016/09/02 PHP
thinkphp修改配置进入默认首页的方法
2017/02/07 PHP
PHP实现负载均衡的加权轮询方法分析
2018/08/22 PHP
Extjs4 关于Store的一些操作(加载/回调/添加)
2013/04/18 Javascript
jQuery中:radio选择器用法实例
2015/01/03 Javascript
javascript中offset、client、scroll的属性总结
2015/08/13 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
2016/08/01 Javascript
浅谈React 属性和状态的一些总结
2016/11/21 Javascript
JavaScript严格模式详解
2017/01/16 Javascript
ES6新特性七:数组的扩充详解
2017/04/21 Javascript
详解javascript appendChild()的完整功能
2018/08/18 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
2019/04/09 Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
2019/10/23 jQuery
Vue使用Proxy代理后仍无法生效的解决
2020/11/13 Javascript
[01:00:53]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Secret
2018/03/30 DOTA
[46:28]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
python 查找文件夹下所有文件 实现代码
2009/07/01 Python
Python实现的一个简单LRU cache
2014/09/26 Python
tensorflow 输出权重到csv或txt的实例
2018/06/14 Python
python使用循环打印所有三位数水仙花数的实例
2018/11/13 Python
详解python中的Turtle函数库
2018/11/19 Python
在OpenCV里使用Camshift算法的实现
2019/11/22 Python
Python爬虫爬取百度搜索内容代码实例
2020/06/05 Python
如何更换python默认编辑器的背景色
2020/08/10 Python
美国伴娘礼服商店:Evening Collective
2019/10/07 全球购物
Armor Lux法国官方网站:水手服装、成衣和内衣
2020/05/26 全球购物
语文教育专业应届生求职信
2013/11/23 职场文书
大堂副理的岗位职责范文
2014/02/17 职场文书
幼儿园户外活动总结
2014/07/04 职场文书
湖南省召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
JS实现简单控制视频播放倍速的实例代码
2021/04/18 Javascript
Python中常见的反爬机制及其破解方法总结
2021/06/10 Python
一文搞懂php的垃圾回收机制
2021/06/18 PHP