keypress和keydown事件及keyCode和keyChar

时间:2022-12-23 08:47:41

二:keypress和keydown事件:

现只在IE10、chrome(版本 32.0.1700.107 m)、firefox(25.0.1)中测试了。

  IE8 chrome firefox
$(document).keydown() yes yes yes
$('window').keydown() no yes yes
$('body').keydown() no yes yes

keypress的表现与上表一致。
不仅keypress和keydown得到的按键值不同,不同浏览器的返回值event.keyCode、event.charCode也不同:

    Q键 q键 Caps Lock键 Tab键 左方向键 数字1键 Enter键 空格键 F5键
key
down
key
press
key
down
key
press
key
down
key
press
key
down
key
press
key
down
key
press
key
down
key
press
key
down
key
press
key
down
key
press
key
down
key
press
IE10 keyCode 81 81 81 113 20 -- 9 -- 37 -- 49 49 13 13 32 32 116 --
charCode  0 81   0 113   --  0 --   0  --  0  49  0  13   32  0 -- 
chrome keyCode 81 81 81 113 20 -- 9 9 37 -- 49 49 13 13 -- 32 116 --
charCode 81   113  0 --   0  9 --   0 --   13  --  32  -- 
firefox keyCode 81 0 81 0 20 -- 9 9 37 37    49  0 13 13 32 0 116 116
charCode  0 81   113 --   0  0  0 49   0  0 32   0  0

(还有一个event.whice:A non-standard property, the hybrid of charCode and keyCode, with the sole purpose to confuse a developer.
But in the zoo of key events it also plays a good role. Particulary, it helps to get the character. )

还有一些属性:shiftKey, ctrlKey, altKey, metaKey,布尔类型的值,检测按键是否是shift、ctrl、alt、Command(Mac only).

可以看出对于keyCode:

keydown几乎对所有按键都有返回值,且对大小写字母的返回值相同;

kepress似乎对只对字母按键有返回值,且对大小写字母的返回值不一样.

关于keydown、keypress、keyup的区别,参考http://javascript.info/tutorial/keyboard-events,上面写的很详细,摘录如下:

对于keydown,任何按键事件都能触发它,并返回scan-code(按键本身固有的数字代码,所有同一个键的scan-code肯定相同);

对于keypress,只保证character keys(字符按键)事件能触发它,并返回char-code(按键的unicode字符,区分大小写按键,charCode只在keypress中返回。js中的str.charCodeAt() 方法就可返回指定位置的字符的 Unicode 编码)。

For all keys except ';', '=' and '-' different browsers use same key code.。

看了上面的表是不是觉得有点......,参考网页中还给出了keypress的事件代码

如何获取键入的字符值和数字值:

// only keypress event
function getChar(event) {
  if (event.which == null) {
    return String.fromCharCode(event.keyCode) // IE
  } else if (event.which!=0 && event.charCode!=0) {
    return String.fromCharCode(event.which) // the rest
  } else {
    return null // special key
  }
}

测试IE10、chrome、firefox有效。

由于String.fromCharCode对special keys 会返回weird results.所有不能直接return String.fromCharCode(event.keyCode||event.charCode)。

如何获取包含特殊键在内的组合键:

以ctrl+e为例:

document.onkeydown = function(e) {
  e = e || event;
  if ((e.ctrlKey && e.keyCode == 'E'.charCodeAt(0)) ) {
   //do something
}

由于keyCode对大小写字符返回的都是大写字母值,所以e.keyCode == 'E'.charCodeAt(0)对e和E都能识别。

测试IE10、chrome、firefox有效。(如果先按住E,再同时按ctrl,则都无效)

keypress和keydown事件及keyCode和keyChar的更多相关文章

  1. javascript 中 keyup、keypress和keydown事件

    keyup.keypress和keydown事件都是有关于键盘的事件 1. keydown事件在键盘的键被按下的时候触发,keyup 事件在按键被释放的时候触发    keydown.keypress ...

  2. js keyup、keypress和keydown事件

    js keyup.keypress和keydown事件都是有关于键盘的事件 当一个按键被pressed 或released在每一个现代浏览器中,都可能有三种客户端事件. keydown event k ...

  3. js keyup、keypress和keydown事件 详解

    js keyup.keypress和keydown事件  详解 js keyup.keypress和keydown事件都是有关于键盘的事件 当一个按键被pressed 或released在每一个现代浏 ...

  4. 转载关于KeyPress和KeyDown事件的区别和联系

    KeyDown:在控件有焦点的情况下按下键时发生. KeyPress:在控件有焦点的情况下按下键时发生. KeyUp:在控件有焦点的情况下释放键时发生. 1.KeyPress主要用来接收字母.数字等A ...

  5. C#学习笔记-KeyDown、KeyPress、KeyUp事件以及KeyCode、KeyData、KeyValue、KeyChar属性

    本来没打算单独写的,但是在自己弄测试小程序的时候,越写发现不清楚的东西越多,所以实践又一次证明:纸上得来终觉浅,绝知此事要躬行! 直接贴代码了: //发生顺序:KeyDown->KeyPress ...

  6. js获取浏览器的keydown事件(附keycode码)

    <script type="text/javascript" language=JavaScript charset="UTF-8"> docume ...

  7. C&num; 如何捕获键盘按钮和组合键以及KeyPress&sol;KeyDown事件之间的区别 (附KeyChar&sol;KeyCode值)

    1. 首先将窗口属性KeyPreview设为true,如果属性对话框中找不到,就直接在代码里添加: 2. 添加KeyPress / KeyDown事件: 1.KeyPress 和KeyDown .Ke ...

  8. Winform下KeyDown,KeyPress,KeyUp事件的总结&lpar;转&rpar;

    原文: http://www.cnblogs.com/xiashengwang/archive/2011/09/15/2578798.html 在winform程序中,经常会用到这几个事件用于控制数字 ...

  9. C&num;控件中的KeyDown、KeyPress 与 KeyUp事件浅谈

    研究了一下KeyDown,KeyPress 和 KeyUp 的学问.让我们带着如下问题来说明: 1.这三个事件的顺序是怎么样的? 2.KeyDown 触发后,KeyUp是不是一定触发? 3.三个事件的 ...

随机推荐

  1. JsonTest

    以前用MVC写网站时并不用考虑Json的转换,MVC已经提供了现成的方法. 现在没有用MVC,我就在考虑如何自己转换Json,想来想去自己写还是不够完美,于是尝试了一些其他人写的方法,尝试过微软提供的 ...

  2. WebService核心之WSDL深入详解

    WebService核心之WSDL深入详解 根据上一篇文章开发的Web Service实例生成的WSDL文档如下: XML里两个属性介绍: targetNamespace          相当于ja ...

  3. &lbrack;转&rsqb;&quot&semi;error while loading shared libraries&colon; xxx&period;so&period;x&quot&semi; 错误的原因和解决办法

    [转]"error while loading shared libraries: xxx.so.x" 错误的原因和解决办法 http://blog.csdn.net/sahuso ...

  4. wing 5&period;0 注册机

    输入License id 进入下一页获得request key ,输入request key 后点击生成,即可生成激活码,亲测可用 下载链接 密码:adwj

  5. HATEOAS

    HATEOAS(Hypermedia as the engine of application state)是 REST 架构风格中最复杂的约束,也是构建成熟 REST 服务的核心.它的重要性在于打破 ...

  6. &lbrack;转&rsqb;python3之os与sys模块

    转自:https://www.cnblogs.com/zhangxinqi/p/7826872.html#_label8 阅读目录 一.Python os模块 1.os.access() 2.os.c ...

  7. distpicker省市区插件初始化选中值的问题

    $('#distpicker1').distpicker('destroy')  //当需要重新生成的时候,需要先销毁 $('#distpicker1').distpicker({ province: ...

  8. 4、CentOS6&period;5下安装php5&period;3

    操作系统:CentOS6.5 环境:Apache2.2安装成功.可查看:http://www.centoscn.com/image-text/install/2014/0505/2910.html M ...

  9. javascript类式继承最优版

    直接看实例代码: <!doctype html> <html lang="en"> <head> <meta charset=" ...

  10. 编程(Linux、windows)常见命令

    1.history | grep  start 可以查看该linux上输入过的包含start的所有命令 2. for /r %i in (*.lastUpdated) do del %i 在windo ...