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压缩利器
Feb 20 Javascript
getElementById在任意一款浏览器中都可以用吗的疑问回复
May 13 Javascript
json 入门基础教程 推荐
Oct 31 Javascript
基于PHP+Jquery制作的可编辑的表格的代码
Apr 10 Javascript
脚本合并提升javascript性能示例
Feb 24 Javascript
jquery获取复选框被选中的值
Apr 10 Javascript
JavaScript笔记之数据属性和存储器属性
Mar 31 Javascript
js Dom实现换肤效果
Oct 21 Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
Feb 21 Javascript
简单了解小程序+node梳理登陆流程
Jun 24 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
Sep 25 Javascript
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
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循环结构实例讲解
2014/02/10 PHP
PHP中addslashes()和stripslashes()实现字符串转义和还原用法实例
2016/01/07 PHP
php字符串截取函数mb_substr用法实例分析
2019/06/25 PHP
PHP7移除的扩展和SAPI
2021/03/09 PHP
Javascript 文件夹选择框的两种解决方案
2009/07/01 Javascript
基于promise.js实现nodejs的promises库
2014/07/06 NodeJs
jQuery简单实现禁用右键菜单
2015/03/10 Javascript
jquery实现动态改变div宽度和高度
2015/05/08 Javascript
JavaScript实现仿淘宝商品购买数量的增减效果
2016/01/22 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
2016/05/09 Javascript
windows下vue.js开发环境搭建教程
2017/03/20 Javascript
vue数据双向绑定的注意点
2017/06/23 Javascript
jQuery修改DOM结构_动力节点Java学院整理
2017/07/05 jQuery
给vue项目添加ESLint的详细步骤
2017/09/29 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
2017/12/27 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
2018/01/25 Javascript
React Form组件的实现封装杂谈
2018/05/07 Javascript
10行代码实现微信小程序滑动tab切换
2018/12/28 Javascript
Vue 中获取当前时间并实时刷新的实现代码
2020/05/12 Javascript
Openlayers实现点闪烁扩散效果
2020/09/24 Javascript
[32:17]完美世界DOTA2联赛循环赛LBZS vs Forest第二场 10月30日
2020/10/31 DOTA
python 解析XML python模块xml.dom解析xml实例代码
2014/02/07 Python
Python浅复制中对象生存周期实例分析
2018/04/02 Python
python线程安全及多进程多线程实现方法详解
2019/09/27 Python
Python实现病毒仿真器的方法示例(附demo)
2020/02/19 Python
在 Windows 下搭建高效的 django 开发环境的详细教程
2020/07/27 Python
YesBabyOnline美国:全球性的在线婚纱礼服工厂
2018/05/05 全球购物
导师推荐信范文
2014/05/09 职场文书
董事长助理岗位职责
2015/02/11 职场文书
寒假社会实践个人总结
2015/03/06 职场文书
土木工程毕业答辩开场白
2015/05/29 职场文书
反邪教学习心得体会
2016/01/15 职场文书
导游词之扬州大明寺
2019/10/09 职场文书
MySQL基于索引的压力测试的实现
2021/11/07 MySQL
vue中 this.$set的使用详解
2021/11/17 Vue.js
pandas进行数据输入和输出的方法详解
2022/03/23 Python