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代码
Nov 23 Javascript
求数组最大最小值方法适用于任何数组
Aug 16 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
Sep 16 Javascript
javascript获取wx.config内部字段解决微信分享
Mar 09 Javascript
微信小程序 图片边框解决方法
Jan 16 Javascript
js 调用百度分享功能
Feb 27 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
Jan 17 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
Vue数据绑定简析小结
May 07 Javascript
微信小程序云开发之使用云数据库
May 17 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
Nov 30 Javascript
linux服务器快速卸载安装node环境(简单上手)
Feb 22 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
js处理自己不能定义二维数组的方法详解
2014/03/03 Javascript
网站繁简切换的JS遇到页面卡死的解决方法
2014/03/12 Javascript
jquery常用方法及使用示例汇总
2014/11/08 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
2015/01/09 Javascript
Jquery网页内滑动缓冲导航的实现代码
2015/04/05 Javascript
javascript原始值和对象引用实例分析
2015/04/25 Javascript
Javascript实现获取及设置光标位置的方法
2015/07/21 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
2016/11/28 Javascript
Javascript中常用类型的格式化方法小结
2016/12/26 Javascript
JS中的数组转变成JSON格式字符串的方法
2017/05/09 Javascript
JS开发中基本数据类型具体有哪几种
2017/10/19 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
2018/09/05 jQuery
详解vue中使用vue-quill-editor富文本小结(图片上传)
2019/04/24 Javascript
vue 组件销毁并重置的实现
2020/01/13 Javascript
vue路由缓存的几种实现方式小结
2020/02/02 Javascript
Ant Design的Table组件去除
2020/10/24 Javascript
vue-cli3配置favicon.ico和title的流程
2020/10/27 Javascript
解决Element中el-date-picker组件不回填的情况
2020/11/07 Javascript
python读取csv文件示例(python操作csv)
2014/03/11 Python
Python实现抓取城市的PM2.5浓度和排名
2015/03/19 Python
python3+PyQt5实现自定义窗口部件Counters
2018/04/20 Python
详解Django中六个常用的自定义装饰器
2018/07/04 Python
python3使用flask编写注册post接口的方法
2018/12/28 Python
python 批量添加的button 使用同一点击事件的方法
2019/07/17 Python
Python @property及getter setter原理详解
2020/03/31 Python
Python数据模型与Python对象模型的相关总结
2021/01/26 Python
会计实习生自我鉴定
2013/12/12 职场文书
音乐教学反思
2014/02/02 职场文书
学生会离职感言
2014/02/11 职场文书
2014年父亲节活动方案
2014/03/06 职场文书
我的大学生活演讲稿
2014/04/25 职场文书
高校优秀辅导员事迹材料
2014/05/07 职场文书
乡党政领导班子群众路线教育实践活动个人对照检查材料
2014/09/20 职场文书
一次性工伤赔偿协议书范本
2014/11/25 职场文书
授权委托书
2015/01/28 职场文书
2016教师读书思廉心得体会
2016/01/23 职场文书