键盘事件之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检测输入框的值是否发生了改变,如果改变了就作对应的处理, ...
随机推荐
- JAVA HashMap与HashTable 区别
HashTable和HashMap区别 第一,继承不同. public class Hashtable extends Dictionary implements Mappublic class Ha ...
- SharePoint各版本信息
参考网页http://blogs.msdn.com/b/erica/archive/2013/05/30/sharepoint-server-2010-version-reference.aspx
- (转)C/C++中static关键字
下面的转自http://www.cnblogs.com/yc_sunniwell/archive/2010/07/14/1777441.html 静态变量作用范围在一个文件内,程序开始时分配空间,结束 ...
- discuz二次开发笔记(三)------discuz的安装步骤
下载好discuz的安装包后,解压在自己定义的文件夹里面,将upload里面的文件拷贝出来放到和upload同级的地方,然后删除upload文件夹. 打开浏览器,输入你文件夹的地址:如:http:// ...
- mySql-数据库之存储过程学习总结
之前在工作中总是听别人提到存储过程,觉得是个很高深的东西,利用工作之余,看了下相关的知识,现将学习知识总结如下,希望可以为刚学习的人提供些许帮助. 开发环境:Navicat For Mysql. My ...
- Intent七在属性之一:ComponentName
注:在<疯狂android讲义>中,此属性称为Component,官方文档中称为ComponentName. 1.The name of the component that should ...
- RemoteViews的内部机制
1.RemoteViews的构造方法public RemoteViews(String packageName,int layoutId) 第一个表示当前应用的包名(反射机制需要),第二个表示加载的布 ...
- PHP获取生成一个页面的数据库查询次数(转)
很多博客软件都有这么一个功能,比如“生成本次页面一共花费了xx毫秒,进行了xx次数据库查询”等等.那么这个功能是如何实现的呢,下面我大概说下思路. 1. 在类的构造函数中声明全局变量 定义一个全局变量 ...
- laravel artisan 命令工具
//全局相关 php artisan:显示详细的命令行帮助信息,同 php artisan list php artisan –help:显示帮助命令的使用格式,同 php artisan help ...
- Window10安装TestLink,以及登录mysql数据库的错误处理
步骤一: 需要安装apache和mysql,但是我们这里仅仅是使用testlink,不关注其他,所以使用Vertrigoserv进行傻瓜式安装,安装完后,下载testlink解压,将解压后的文件放入D ...