博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
深入理解DOM事件类型系列第二篇——键盘事件
阅读量:6507 次
发布时间:2019-06-24

本文共 2664 字,大约阅读时间需要 8 分钟。

前面的话

  鼠标和键盘是电脑端主要的输入设备,上篇介绍了,本文将详细介绍键盘事件

 

类型

  键盘事件用来描述键盘行为,主要有keydown、keypress、keyup三个事件

keydown

  当用户按下键盘上的任意键时触发,如果按住不放的话,会重复触发该事件

请按下键盘上的任意键

keypress

  当用户按下键盘上的字符键时触发,按下功能键时不触发。如果按住不放的话,会重复触发该事件

  [注意]关于esc键,各浏览器处理不一致。IE浏览器和firefox浏览器按下esc键时,会触发keypress事件;而chrome/safari/opera这三个webkit内核的浏览器则不会触发

  键盘事件必须绑定在可以获得焦点的元素上。而页面刚加载完成时,焦点处于document元素

  [注意]IE浏览器不完全支持绑定在document元素上的keypress事件,只有IE9+浏览器在使用DOM2级事件处理程序时才支持

  所以,以下代码中,只有焦点处于id为'test'的元素上,才会发生keypress事件

keyup

  当用户释放键盘上的键时触发

请按下键盘上的任意键

时间间隔

  系统为了防止按键误被连续按下,所以在第一次触发keydown事件后,有500ms的延迟,才会触发第二次keydown事件

  [注意]类似的,keypress事件也存在500ms的时间间隔

说明:按钮获取焦点后,使用空格键按下一段时间,松开后可获取keydown事件的时间间隔

顺序

  如果用户一直按键不松开,就会连续触发键盘事件,触发的顺序如下

1、keydown2、keypress3、keydown4、keypress5、(重复以上过程)6、keyup

按键信息

  键盘事件包括keyCode、key、char、keyIdentifier和修改键共5个按键信息

键码keyCode

  在发生键盘事件时,event事件对象的键码keyCode属性中会包含一个代码,与键盘上一个特定的键对应。对数字字母字符键,keyCode属性的值与ASCII码中对应大写字母或数字的编码相同

  [注意]firfox浏览器不支持keypress事件中的keyCode属性

  而我们在做游戏时,常用的四个方向按键,左上右下(顺时针)的键码分别是37、38、39、40

key

  key属性是为了取代keyCode而新增的,它的值是一个字符串。在按下某个字符键时,key的值就是相应的文本字符;在按下非字符键时,key的值是相应键的名,默认为空字符串

  [注意]IE8-浏览器不支持,而safari浏览器不支持keypress事件中的key属性

char

  char属性在按下字符键时的行为与key相同,但在按下非字符键时值为null

  [注意]该属性只有IE9+浏览器支持

keyIdentifier

  keyIdentifier属性在按下非字符键的情况下与key的值相同。对于字符键,keyIdentifier返回一个格式类似“U+0000”的字符串,表示Unicode值

  [注意]该属性只有chrome/safari/opera浏览器支持

兼容

  一般地,使用key属性和keyCode属性来实现兼容处理。key属性IE8-浏览器不支持,而keyCode属性无法区分大小写字母

var handler = function(e){    var CompatibleKey;    e = e || event;    //支持key属性    if(e.key != undefined){        CompatibleKey = e.key;    }else{        //当按键是数字或大写字母时        if(e.keyCode>47 && e.keyCode<58 || e.keyCode>64 && e.keyCode<91){            CompatibleKey =String.fromCharCode(e.keyCode);        }else{            //当案按键是方向按键时            switch(e.keyCode){                case 37:                    CompatibleKey = 'ArrowLeft';                    break;                case 38:                    CompatibleKey = 'ArrowUp';                    break;                case 39:                    CompatibleKey = 'ArrowRight';                    break;                case 40:                    CompatibleKey = 'ArrowDown';                    break;            }        }        }}

修改键

  修改键在鼠标事件中介绍过,在键盘事件中也存在修改键

  修改键就是Shift、Ctrl、Alt和Meta(在Windows键盘中是Windows键,在苹果机中是Cmd键)。DOM为此规定了4个属性,表示这些修改键的状态:shiftKey、ctrlKey、altKey和metaKey。这些属性中包含的都是布尔值,如果相应的键被按下了,则值为true;否则值为false

应用

【1】提示大写

  在输入框中输入字符时,如果大写模式开启,提示此时为大写模式。提示大写并不是说当前输出的是大写字母,而是说当前caps lock大写按键被按下

  [注意]大写有两种实现方式:一种是在capslock开启的情况下,另一种是输入字符时,同时按下shift键

【2】过滤输入

  只能输入数字,输入其他字符没有效果

只能输入数字

转载地址:http://hgwfo.baihongyu.com/

你可能感兴趣的文章
仿余额宝数字跳动效果 TextCounter
查看>>
你必须知道的.net学习总结
查看>>
Axure8.0 网页 or App 鼠标滚动效果
查看>>
大家好,新年快乐。
查看>>
Android学习路线
查看>>
Linux下的redis的持久化,主从同步及哨兵
查看>>
在相同的主机上创建一个duplicate数据库
查看>>
Date15
查看>>
从Date类型转为中文字符串
查看>>
基于multisim的fm调制解调_苹果开始自研蜂窝网调制解调器 最快2024年能用上?
查看>>
mupdf不支持x64_Window权限维持(七):安全支持提供者
查看>>
labview如何弹出提示窗口_LabVIEW开发者必读的问答汇总,搞定疑难杂症全靠它了!...
查看>>
hikariconfig mysql_HikariConfig配置解析
查看>>
mysql批量数据多次查询数据库_mysql数据库批量操作
查看>>
jquery 乱码 传参_jquery获取URL中参数解决中文乱码问题的两种方法
查看>>
JDBC_MySQL_jdbc连接mysql_MySQL
查看>>
mysql cte的好处_Mysql 8 重要新特性 - CTE 通用表表达式
查看>>
zcu106 固化_xilinx zcu106 vcu demo
查看>>
java ftpclient 代码_java后台代码ftpclient下载文件
查看>>
java数据库生成model_继承BaseModelGenerator 生成Model时添加数据库表字段 生成代码示例...
查看>>