JavaScript Event学习第十一章 按键的检测

第一个问题是对于按键事件来说根本就没有标准，按照规范说的：包含键盘等输入设备的事件模型会在以后的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

charCode



因此，在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)

赞 (0)

相关推荐

  • JavaScript Event学习第十一章 按键的检测

    JavaScript Event学习第十一章 按键的检测

    第一个问题是对于按键事件来说根本就没有标准,按照规范说的:包含键盘等输入设备的事件模型会在以后的DOM规范中作出解释. 正如我们了解到的,浏览器在最开始设计的时候并没有一个标准,大家都像做实验似的,最后的成品虽然是有用的,但是肯定造成了兼容性的问题.按键问题也不例外:这里有两个属性能检测到用户按下了什么键,虽然有足够的理由为什么需要两个属性,但是依然并不是所有的浏览器都支持. 另外,在keypress与keydown和keyup之间还有一些很重要的区别. 最后就是windows和mac的区别了,

  • JavaScript Event学习第四章 传统的事件注册模型

    在最古老的JavaScript浏览器里注册事件只能通过内联模式.自从DHTML从根本上改变了你操作页面的方法,事件的注册就必须有扩展性而且要有很强的适应性.所以就必须有相应的事件模型.Netscape在第三代浏览器中就开始了,IE在第四代浏览器开始. 因为Netscape 3就开始支持这种新的事件注册模型,在浏览器战争前就是事实上的标准.所以微软不得不也是最后一次为了网上那些数不清的使用了Netscape事件处理模型的页面在兼容性上做出了让步. 所以这两个浏览器,事实上也是所有的浏览器都支持下面

  • JavaScript Event学习第七章 事件属性

    当我们想去读一读关于Event的一些资料时,常常会湮没在大量的属性里面,这些属性其中的大多数不能良好的运行在大多数的浏览器.这里有event的兼容性列表. 我不打算给这些属性列个表,因为那些情况实在是太让人晕头了,而且对你的学习也不会有一点点的帮助.在写5段代码前我先要问关于浏览器的5个问题. 1.event的类型(type)是什么? 2.哪一个HTML元素是event的目标呢? 3.哪些键在event发生时被按下了? 4.哪个鼠标键在Event发生时被按下了? 5.在Event发生时鼠标的位置

  • JavaScript Event学习第六章 事件的访问

    现在我们已经注册了事件处理程序,对于事件我们还想更深入的了解.我们想知道事件发生时候的鼠标位置,我们想知道用户按下了哪些键.这些都是可能的,虽然这部分有很多烦人的浏览器兼容性问题.(这里可以快速查看浏览器兼容性列表). 要读出事件的属性,必须要先能访问到事件. 浏览器兼容性 站在浏览器战争的角度看,Netscape实现了一个访问模型(后来被W3C做借鉴)和很多的事件属性,同时微软也做了同样的事情.当然这两种模型是完全不兼容的.但是就像我们再简介里面说的,如果 复制代码 代码如下: if (W3C

  • JavaScript Event学习第三章 早期的事件处理程序

    这些古老的浏览器只支持一种注册事件处理程序的方法,这个方法是Netscape发明的.因为Netscape先发制人,所以如果微软也想做支持JavaScript事件的浏览器就得跟着Netscape走,所以这里没有兼容性的问题.所以这种模式在任何支持JavaScript的浏览器都能运行---除了Mac上的IE3,他根本就不支持事件. 注册事件处理程序 在内联式的事件注册模型中,事件处理程序就像是一个HTML元素的属性,比如: <A HREF="somewhere.html" onCli

  • JavaScript Event学习第五章 高级事件注册模型

    W3C和微软都着力于发展自己的事件注册模型来取代Netscape的传统模型.虽然对于微软的模型我不是很感冒,但是w3c的还是不错的,除了这个鼠标定位 的问题.不过现在只有小部分浏览器支持. W3C W3C的DOM层面事件规范注意到了传统模式的问题.他对于你想在一个元素上绑定多个事件提供了一个很好的解决办法. W3C事件注册模型的关键就是addEventListener().你给他三个参数:事件类型,要执行的函数和一个布尔值(true或者false)我一会再解释.把我们熟知的doSomething

  • JavaScript Event学习第二章 Event浏览器兼容性

    在这里提出的事件,当他们发生在一个确定的HTML元素上的时候,他们的名字能够被大多数的浏览器所识别.也就是说,浏览器会查找你为这个HTML元素所注册的事件处理程序的脚本,而且会被立即执行.      一开始只有为数很少的一些事件.这些事件在几乎所有的JavaScript浏览器都能运行,即使是那些非常古老的.需要注意的是那些早期的事件只能工作在链接或者表单上,有时候也能运行在整个窗口上,但是其他的大多数HTML元素不行.      时代变迁,很多新的事件也给大家介绍过了.第四代浏览器和更高级的浏览

  • JavaScript Event学习第九章 鼠标事件

    先看看都有哪些鼠标事件:mousedown,mouseup_and_click,dblclick,mousemove和mouseover mouseout.然后还会解释一下relatedTarget,fromElement和toElement这些事件属性.最后是微软的mouseenter和mouseleave事件. 浏览器的兼容性问题,可以在浏览器兼容性列表查看. 例子 这里有一个例子.可以帮助理解下面的内容. mousedown,mouseup,click和dblclick在这个链接上注册.可

  • JavaScript Event学习第八章 事件的顺序

    基本问题很简单.假设你的一个元素包含在另外一个元素中. 复制代码 代码如下: ----------------------------------- | element1 | | ------------------------- | | |element2 | | | ------------------------- | ----------------------------------- 这两个元素都有onclick事件处理程序.如果用户在element2上面单击那么在元素2和元素1上都

  • JavaScript DOM 学习第五章 表单简介

    因为每一个表单的检测项都不同,所以我也不能给你一个万能的代码.你需要用我在这一章介绍的这些元素构建自己的检测函数.我在后面一张还有一个例子,你也可以参考. 在这一章我会首先讨论一下用JavaScript来检测表单的局限性,然后会解释一下提交时间处理程序,然后是表单本身的一些方法和属性.最后就是如何访问表单元素. 这里还有一篇Jeff Howden的介绍表单的使用错误和解决办法.Forms & JavaScript Living Together in Harmony局限性 首先,你需要了解当用户

随机推荐