键盘事件之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检测输入框的值是否发生了改变,如果改变了就作对应的处理, ...
随机推荐
- AudioManager详解(结合源代码)
AudioManager:用来对音量大小,声音模式(静音,震动,震动加声音等模式)的管理, 还有用它来注册“插入耳机”时的广播接收者(Action: android.intent.action.MED ...
- php下载服务器上的文件
$file_xls=$path; // 文件的保存路径 $example_name=basename($file_xls); //获取文件名 header('Content-Descrip ...
- Kali下使用libheap
Kali下使用libheap 在github上,可以libheap用来帮助调试堆溢出.链接见:https://github.com/cloudburst/libheap 但是最后一次更新在一年前了,我 ...
- mysql用户修改登录密码及开启远程登录
一.修改用户登录密码: mysql> show databases;ERROR 1820 (HY000): You must SET PASSWORD before executing this ...
- PHP学习笔记1.2——预定义变量参考
预定义变量和用户自定义变量在使用上没有区别,大多数预定义变量的执行结果都是服务器的相关信息(如:版本号.路径.错误参数等),所以我们很少将其用于网站前台开发,如果被别有用心得人知道了后,会严重威胁服务 ...
- Springmvc和velocity使用的公用后台分页
Springmvc和velocity使用的公用后台分页 类别 [选择一个类别或键入一个新类别] Springmvc和velocity使用的公用后台分页 样式: 使 ...
- dojo.byId、dojo.query、dojo.attr
概述: dojo.byId(/*string*/id或/*DomNode*/node) 1.传入DOMNode返回传入的domNode; 2.传入id返回id为当前值的domNode dojo.que ...
- UVA 140 Bandwidth
题意: 给出一个n个节点的图G,和一个节点的排列,定义节点i的带宽为i和相邻节点在排列中的最远距离,而所有带宽的最大值就是图的带宽,求让图的带宽最小的排列. 分析: 列出所有可能的排列,记录当前找到的 ...
- JavaWeb限流QPS简易框架
Java Web利用filter实现拦截请求,统计信息.并控制单台机器QPS. /** * 网络流量控制器 */ public class TrafficFilter implements Filte ...
- JS delete 用法(删除对象属性及变量)
1,对象属性删除 function fun(){ this.name = 'mm'; } var obj = new fun(); console.log(obj.name);//mm delete ...