键盘事件之keydown keypress keyup区别
经过测试,显然事件执行的顺序是: 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区别的更多相关文章
- 部分无线终端不响应键盘事件(keydown,keypress,keyup)的解决办法
在无线侧实现搜索显示smartbox功能的时候,会对输入框绑定keydown.keyup.keypress事件,从而在检测到输入框的值发生改变时,发出请求拉取smartbox的内容. 但是,在iPho ...
- keyDown keyPress keyUp 事件的区别
keyDown keyPress keyUp 事件的区别 一 触发顺序 显而易见,事件发生的顺序是: keydown --> keypress --> keyup 当按住一个键一段时间后 ...
- keydown - > keypress - > keyup 用法和区别
英文输入法: 事件触发顺序:keydown - > keypress - > keyup 中文输入法: firfox:输入触发keydown,回车确认输入触发keyup chr ...
- keydown,keypress,keyup三者之间的区别
最近看了Javascript高级教程中对过滤输入的介绍,想实现比如电话号码中不能包好非数值的字符,而相应文本中插入字符的操作是keypress事件,所以就想通过阻止这个事件的默认事件行为来阻止这个事件 ...
- Vue2键盘事件:keydown/keyup...
Vue2键盘事件:keydown/keyup... 1.使用 <!DOCTYPE html> <html> <head> <title></tit ...
- keydown - > keypress - > keyup
英文输入法: 事件触发顺序:keydown - > keypress - > keyup 中文输入法: firfox:输入触发keydown,回车确认输入触发keyup chr ...
- vue学习笔记(一)关于事件冒泡和键盘事件 以及与Angular的区别
一.事件冒泡 方法一.使用event.cancelBubble = true来组织冒泡 <div @click="show2()"> <input type=&q ...
- 关于事件冒泡和键盘事件 以及与Angular的区别
一.事件冒泡 方法一.使用event.cancelBubble = true来组织冒泡 <div @click="show2()"> <input type=&q ...
- 无线端不响应键盘事件(keydown,keypress,keyup)
今天在项目时,在android手机上使用输入法的智能推荐的词的话,不会触发keyup事件,一开始想到在focus时使用一个定时器,每隔100ms检测输入框的值是否发生了改变,如果改变了就作对应的处理, ...
随机推荐
- 小函数,大智慧,php的isset和empty
Disset()函数 一般用来检测变量是否设置 bool isset ( mixed var [, mixed var [, ...]] ) 功能:检测变量是否设置 返回值: FALSE N ...
- J2EE之ANT
Ant是一种基于Java的build工具.由一些内置任务组成.这些任务用于编译和运行java应用.创建文档.文件和文件夹的操作. 理论上来说.它有些类似于(Unix)C中的make ,但没有make的 ...
- AJAX最简单的原理以及应用
Ajax是创建快速动态网页的技术,通过后台与服务器少量的数据交互,是网页实现异步更新.也就是在不整个刷新页面的情况下,可以更新网页中的局部区域. 在原始web应用的模式中: 浏览器 以 h ...
- 如何对应用服务性能问题诊断(Tomcat、Weblogic中间件)
在我们web项目中,我们常见的web应用服务器有Tomcat.Weblogic.WebSphere.它们是互联网应用系统的基础架构软件,也叫“中间件”,负责处理动态在页面请求,并为应用提供了名字.事务 ...
- 配置基于NotePad++工具下的C#开发环境
1.打开NotePad++,打开Notepad++的插件(plugins)菜单-->Plugin Manager-->Show Plugin Manager-->勾选NppExec- ...
- 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)))\ ...
- 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错误,但数据库和表也建成功了.有高人知 ...
- c# 调用EXCEL在VS上能正常运行,部署在IIS上不能实现,在VS中运行页面和发布之后在IIS中运行的区别
发现一篇文章,很好,解决了这个问题:感谢原博主!特此做个笔记. 地址:http://www.cnblogs.com/zhongxinWang/p/3275154.html 发布在IIS上的Web程序, ...
- Oracle数据类型与.NET中的对应关系(转)
Oracle数据类型与.NET中的对应关系 2011-02-24 10:02:16 标签:C# oracletype Oracle 数据类型 .NET Oracle连接添加的引用不同,会存在数据类型不 ...
- window.showDialog()兼容性处理
ModalDialog 是什么? showModalDialog 是js window对象的一个方法, 和window.open一样都是打开一个新的页面. 区别是: showModalDialog打开 ...