键盘事件之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检测输入框的值是否发生了改变,如果改变了就作对应的处理, ...
随机推荐
- Android日语输入法Simeji使用示例
MainActivity如下: package cn.testsimeji; import android.os.Bundle; import android.view.View; import an ...
- Ffmpeg和SDL创建线程(转)
Spawning Threads Overview Last time we added audio support by taking advantage of SDL's audio functi ...
- 为啥NSString的属性要用copy而不用retain
之前学习生活中,知道NSString的属性要用copy而不用retain,可是不知道为啥,这两天我研究了一下,然后最终明确了. 详细原因是由于用copy比用retain安全,当是NSString的时候 ...
- Sublime Text 2 介紹
代码编辑器或者文本编辑器,对于程序猿来说,就像剑与战士一样,谁都想拥有一把能够随心驾驭且瑞丽无比的宝剑,而每一位程序猿,相同会去追求最适合自己的强大.灵活的编辑器,相信你和我一样,都不会例外. 我用过 ...
- spring MVC做form提交Neither BindingResult nor plain target object for bean name 'command' available
这两天在做spring3.0 MVC+hibernate3.2的练习中,做简单的form提交, 一直报java.lang.IllegalStateException: Neither BindingR ...
- R学习笔记
把学习过程记载下来,加深印象,到时要是忘了也容易查,有需要的同学也可以参考: 1.包的安装:两种方法:一种通过R的菜单,先设定cran镜像,然后安装程序包,会出来一个列表,选择相应程序包安装,安装完毕 ...
- Android实战技巧之十九:android studio导出jar包(Module)并获得手机信息
AS中并没有独立的Module 工程,可是能够在普通的Project中增加Module.所谓的Module就是我们通常所指的模块化的一个单元.并经常以jar包的形式存在.以下以一个获取手机信息的样例演 ...
- 安装sql server 2008 management studio时,提示升级VS2008 到 SP1
安装sql server 2008 management studio时,提示错误:此计算机上安装了 Microsoft Visual Studio 2008 的早期版本.请在安装 SQL Serve ...
- [生成树][Uva1395][Slim Span]
代码: #include <set> #include <queue> #include <cmath> #include <cstdio> #incl ...
- Sublime Text插件FileHeader实践
FileHeader是一个文件模板插件,可以定制各种文件模板和文件头部信息,保存时可以自动更新文件的修改时间.在多人开发中这个功能相当实用. 具体介绍我就不细说了,主要是分享一下在使用FileHead ...