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 相关文章推荐
web 页面分页打印的实现
Jun 22 Javascript
javascript下数值型比较难点说明
Jun 07 Javascript
jquery ajax 同步异步的执行 return值不能取得的解决方案
Jan 08 Javascript
ie9 提示'console' 未定义问题的解决方法
Mar 20 Javascript
JS实现两个大数(整数)相乘
Apr 28 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
Aug 19 Javascript
node.js中的console.log方法使用说明
Dec 09 Javascript
javascript动态获取登录时间和在线时长
Feb 25 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
Jun 12 Javascript
vue组件实现可搜索下拉框扩展
Oct 23 Javascript
JSON是什么?有哪些优点?JSON和XML的区别?
Apr 29 Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
Jun 16 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
虹吸式咖啡壶操作
2021/03/03 冲泡冲煮
PHP伪静态页面函数附使用方法
2008/06/20 PHP
JS 网站性能优化笔记
2011/05/24 PHP
解析用PHP读写音频文件信息的详解(支持WMA和MP3)
2013/05/10 PHP
php使用cookie实现记住用户名和密码实现代码
2015/04/27 PHP
PHP基于phpqrcode生成带LOGO图像的二维码实例
2015/07/10 PHP
详解Yii2.0 rules验证规则集合
2017/03/21 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
动态获取复选框checkbox选中个数的jquery代码
2013/06/25 Javascript
jQuery+PHP打造滑动开关效果
2014/12/16 Javascript
轻松创建nodejs服务器(7):阻塞操作的实现
2014/12/18 NodeJs
js实现将选中值累加到文本框的方法
2015/08/12 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
2016/01/27 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
2016/02/19 Javascript
javascript作用域、作用域链(菜鸟必看)
2016/06/16 Javascript
js窗口震动小程序分享
2016/11/28 Javascript
详解node nvm进行node多版本管理
2017/10/21 Javascript
JavaScript实现计算多边形质心的方法示例
2018/01/31 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
2018/11/30 Javascript
jquery获取input输入框中的值
2019/11/13 jQuery
python导入坐标点的具体操作
2019/05/10 Python
Python笔记之观察者模式
2019/11/20 Python
Python3 ffmpeg视频转换工具使用方法解析
2020/08/10 Python
CSS3 渐变(Gradients)之CSS3 径向渐变
2016/07/08 HTML / CSS
Kipling意大利官网:世界著名的时尚休闲包袋品牌
2019/06/05 全球购物
Linux常见面试题
2016/10/04 面试题
新学期开学寄语
2014/01/18 职场文书
创业计划书的主要内容有哪些
2014/01/29 职场文书
小学体育教学反思
2014/01/31 职场文书
普通大学毕业生自荐信范文
2014/02/23 职场文书
大班上学期幼儿评语
2014/04/30 职场文书
保研推荐信范文
2015/03/25 职场文书
原告代理词范文
2015/05/25 职场文书
楚门的世界观后感
2015/06/03 职场文书
百日宴上的祝酒词
2015/08/10 职场文书
vmware虚拟机打不开vmx文件怎么办 ?vmware虚拟机vmx文件打开方法
2022/04/08 数码科技