经过测试,显然事件执行的顺序是: 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. 小函数,大智慧,php的isset和empty

    Disset()函数 一般用来检测变量是否设置  bool isset ( mixed var [, mixed var [, ...]] )  功能:检测变量是否设置  返回值:  FALSE  N ...

  2. J2EE之ANT

    Ant是一种基于Java的build工具.由一些内置任务组成.这些任务用于编译和运行java应用.创建文档.文件和文件夹的操作. 理论上来说.它有些类似于(Unix)C中的make ,但没有make的 ...

  3. AJAX最简单的原理以及应用

    Ajax是创建快速动态网页的技术,通过后台与服务器少量的数据交互,是网页实现异步更新.也就是在不整个刷新页面的情况下,可以更新网页中的局部区域. 在原始web应用的模式中: 浏览器       以 h ...

  4. 如何对应用服务性能问题诊断(Tomcat、Weblogic中间件)

    在我们web项目中,我们常见的web应用服务器有Tomcat.Weblogic.WebSphere.它们是互联网应用系统的基础架构软件,也叫“中间件”,负责处理动态在页面请求,并为应用提供了名字.事务 ...

  5. 配置基于NotePad++工具下的C#开发环境

    1.打开NotePad++,打开Notepad++的插件(plugins)菜单-->Plugin Manager-->Show Plugin Manager-->勾选NppExec- ...

  6. js IP 正则表达式

    //^((25[0-5]|2[0-4]\d|[01]?\d\d?)($|(?!\.$)\.)){4}$//((?:(?:25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\ ...

  7. EF MySQL 提示 Specified key was too long; max key length is 767 bytes错误

    在用EF的CodeFirst操作MySql时,提示 Specified key was too long; max key length is 767 bytes错误,但数据库和表也建成功了.有高人知 ...

  8. c# 调用EXCEL在VS上能正常运行,部署在IIS上不能实现,在VS中运行页面和发布之后在IIS中运行的区别

    发现一篇文章,很好,解决了这个问题:感谢原博主!特此做个笔记. 地址:http://www.cnblogs.com/zhongxinWang/p/3275154.html 发布在IIS上的Web程序, ...

  9. Oracle数据类型与.NET中的对应关系(转)

    Oracle数据类型与.NET中的对应关系 2011-02-24 10:02:16 标签:C# oracletype Oracle 数据类型 .NET Oracle连接添加的引用不同,会存在数据类型不 ...

  10. window.showDialog()兼容性处理

    ModalDialog 是什么? showModalDialog 是js window对象的一个方法, 和window.open一样都是打开一个新的页面. 区别是: showModalDialog打开 ...