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 dialog里的服务器控件 事件失效问题
Dec 08 Javascript
jquery js 获取时间差、时间格式具体代码
Jun 05 Javascript
JavaScript实现按Ctrl键打开新页面
Sep 04 Javascript
String字符串截取的四种方式总结
Nov 28 Javascript
JS验证input输入框(字母,数字,符号,中文)
Mar 23 Javascript
js遍历获取表格内数据的方法(必看)
Apr 06 Javascript
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
Jun 16 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
微信小程序项目实践之九宫格实现及item跳转功能
Jul 19 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
Oct 18 Javascript
WEEX环境搭建与入门详解
Oct 16 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
Apr 10 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/19 PHP
个人写的PHP验证码生成类分享
2014/08/21 PHP
php jsonp单引号转义
2014/11/23 PHP
php 使用html5实现多文件上传实例
2016/10/24 PHP
PHP 二级子目录(后台目录)设置二级域名
2017/03/02 PHP
JavaScript 特殊字符
2007/04/05 Javascript
javascript控制frame,iframe的src属性代码
2009/12/31 Javascript
node.js中的http.createClient方法使用说明
2014/12/15 Javascript
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
2015/03/12 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
2016/04/26 Javascript
Jquery和JS获取ul中li标签的实现方法
2016/06/02 Javascript
JavaScript解析JSON格式数据的方法示例
2017/01/24 Javascript
javascript 初学教程及五子棋小程序的简单实现
2017/07/04 Javascript
Vue在页面数据渲染完成之后的调用方法
2018/09/11 Javascript
使用ECharts实现状态区间图
2018/10/25 Javascript
VUE.CLI4.0配置多页面入口的实现
2019/11/25 Javascript
JS图片懒加载的优点及实现原理
2020/01/10 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
2020/06/02 Javascript
js实现弹幕飞机效果
2020/08/27 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
2020/12/07 Vue.js
Python访问MySQL封装的常用类实例
2014/11/11 Python
python开发之基于thread线程搜索本地文件的方法
2015/11/11 Python
python try 异常处理(史上最全)
2019/03/07 Python
pytorch 利用lstm做mnist手写数字识别分类的实例
2020/01/10 Python
Python urlencode和unquote函数使用实例解析
2020/03/31 Python
通过Python pyecharts输出保存图片代码实例
2020/11/25 Python
Hotels.com韩国:海外国内旅行所需的酒店和住宿预订网站
2020/05/08 全球购物
医学院学生的自我评价分享
2013/11/19 职场文书
公司建议书怎么写
2014/05/15 职场文书
试用期自我评价怎么写
2015/03/10 职场文书
员工升职自荐信
2015/03/27 职场文书
2015年社区创卫工作总结
2015/04/21 职场文书
2015年小学辅导员工作总结
2015/05/27 职场文书
中学团支部工作总结
2015/08/13 职场文书
2016寒假社会实践心得体会范文
2015/10/09 职场文书
pytorch 实现在测试的时候启用dropout
2021/05/27 Python