经过测试,显然事件执行的顺序是: keydown->keypress->keyup.

但是连续按一个按键的话,会一直触发:keydown keypress。直到你提起按键,会触发keyup。

但是对一些特殊的键子,各个事件在浏览器里能触发的事件并不一样。

有几点需要注意:

1.像keypress对: shift ctrl 上下键等非字符的输入不会触发。

2.在enter键遇到form表单的时候,当只有一个文本框里并且输入ENTER的时候,form表单会自动提交,这时候只会触发keydown,keypress两个事件。

3.当监听keydown事件,enter键遇到form表单并且target='_blank'的时候有些浏览器会拦截页面,原因是:

因为keydown在按下回车的时候已经触发,但这时程序还在处理逻辑,在处理完提交的时候,浏览器会认为是程序打开的新页面,不认为是用户行为打开的,导致浏览器拦截新页面的打开,解决办法是:把监听keydown换成监听keypress。

总结:

keydown 从表现上来看是按下任意键。按下的字符,如果是文本框的话还没有显示到文本框之前就产生的事件。keydown只要按下一个键就会触发。

keypress 就是在松开按键时发生,此时字符已经输入到文本框。要按下并松开并有输入性字符的按键才会触发。

键盘事件之keydown keypress keyup区别的更多相关文章

  1. 部分无线终端不响应键盘事件(keydown,keypress,keyup)的解决办法

    在无线侧实现搜索显示smartbox功能的时候,会对输入框绑定keydown.keyup.keypress事件,从而在检测到输入框的值发生改变时,发出请求拉取smartbox的内容. 但是,在iPho ...

  2. keyDown keyPress keyUp 事件的区别

    keyDown keyPress keyUp  事件的区别 一 触发顺序 显而易见,事件发生的顺序是: keydown --> keypress --> keyup 当按住一个键一段时间后 ...

  3. keydown - > keypress - > keyup 用法和区别

    英文输入法:   事件触发顺序:keydown - > keypress - > keyup   中文输入法:   firfox:输入触发keydown,回车确认输入触发keyup chr ...

  4. keydown,keypress,keyup三者之间的区别

    最近看了Javascript高级教程中对过滤输入的介绍,想实现比如电话号码中不能包好非数值的字符,而相应文本中插入字符的操作是keypress事件,所以就想通过阻止这个事件的默认事件行为来阻止这个事件 ...

  5. Vue2键盘事件:keydown/keyup...

    Vue2键盘事件:keydown/keyup... 1.使用 <!DOCTYPE html> <html> <head> <title></tit ...

  6. keydown - > keypress - > keyup

    英文输入法:   事件触发顺序:keydown - > keypress - > keyup   中文输入法:   firfox:输入触发keydown,回车确认输入触发keyup chr ...

  7. vue学习笔记(一)关于事件冒泡和键盘事件 以及与Angular的区别

    一.事件冒泡 方法一.使用event.cancelBubble = true来组织冒泡 <div @click="show2()"> <input type=&q ...

  8. 关于事件冒泡和键盘事件 以及与Angular的区别

    一.事件冒泡 方法一.使用event.cancelBubble = true来组织冒泡 <div @click="show2()"> <input type=&q ...

  9. 无线端不响应键盘事件(keydown,keypress,keyup)

    今天在项目时,在android手机上使用输入法的智能推荐的词的话,不会触发keyup事件,一开始想到在focus时使用一个定时器,每隔100ms检测输入框的值是否发生了改变,如果改变了就作对应的处理, ...

随机推荐

  1. module require区别

    LUA modue require package 区别 2011-01-19 12:41:35|  分类: 默认分类 |  标签:lua  package  module  require  加载  ...

  2. Swift中NSData与NSDictionary之间的相互转换

    原创Blog,转载请注明出处 使用NSKeyedUnarchiver类来进行相互转换 1.NSDictionary转NSData var dictionaryExample : [String:Any ...

  3. sharepreference实现记住password功能

        SharePreference是用于保存数据用的.主要调用Context.getSharePreferences(String name, int mode)方法来得到SharePrefere ...

  4. asp.net中Repeart选中整行操作

    <asp:Repeater runat="server" ID="rpt_Student"> <HeaderTemplate> < ...

  5. struts2之chain的使用

    /** * 实现功能表单提交给action1先处理,再交由action2进行处理,中间传递参数a,b **/ /** * 1. 配置文件 **/ <action name="actio ...

  6. B - Numbers That Count

    Description        "Kronecker's Knumbers" is a little company that manufactures plastic di ...

  7. C++ 动态绑定

    1.为每一个包含虚函数的类设置一个虚表(VTABLE) 每当创建一个包含有虚函数的类或从包含虚函数的类派生一个类时,编译器就会为这个类创建一个VTABLE.在VTABLE中,编译器放置了这个类中,或者 ...

  8. 关于mysql的安装

    上个学期学了数据库后,曾多次试图安装数据库,但由于电脑的种种的原因或者是安装的问题,始终没能安装成功,今天终于succeed. 一.下载 首先从www.mysql.com网站上下载mysql,我下载的 ...

  9. ssh username@10.2.1.23无法连接

    ssh username@10.2.1.23无法连接 经过排查各种openSSH版本等,最终因为两个机器不是一个段(A:255.255.0.0 B:255.255.255.0)造成的. 关于IP需要以 ...

  10. jquery settimeout使用

    setTimeout(location,5000); //延迟5秒刷新页面 function location(){ window.location.href = window.location.hr ...