经过测试,显然事件执行的顺序是: 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. Android日语输入法Simeji使用示例

    MainActivity如下: package cn.testsimeji; import android.os.Bundle; import android.view.View; import an ...

  2. Ffmpeg和SDL创建线程(转)

    Spawning Threads Overview Last time we added audio support by taking advantage of SDL's audio functi ...

  3. 为啥NSString的属性要用copy而不用retain

    之前学习生活中,知道NSString的属性要用copy而不用retain,可是不知道为啥,这两天我研究了一下,然后最终明确了. 详细原因是由于用copy比用retain安全,当是NSString的时候 ...

  4. Sublime Text 2 介紹

    代码编辑器或者文本编辑器,对于程序猿来说,就像剑与战士一样,谁都想拥有一把能够随心驾驭且瑞丽无比的宝剑,而每一位程序猿,相同会去追求最适合自己的强大.灵活的编辑器,相信你和我一样,都不会例外. 我用过 ...

  5. 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 ...

  6. R学习笔记

    把学习过程记载下来,加深印象,到时要是忘了也容易查,有需要的同学也可以参考: 1.包的安装:两种方法:一种通过R的菜单,先设定cran镜像,然后安装程序包,会出来一个列表,选择相应程序包安装,安装完毕 ...

  7. Android实战技巧之十九:android studio导出jar包(Module)并获得手机信息

    AS中并没有独立的Module 工程,可是能够在普通的Project中增加Module.所谓的Module就是我们通常所指的模块化的一个单元.并经常以jar包的形式存在.以下以一个获取手机信息的样例演 ...

  8. 安装sql server 2008 management studio时,提示升级VS2008 到 SP1

    安装sql server 2008 management studio时,提示错误:此计算机上安装了 Microsoft Visual Studio 2008 的早期版本.请在安装 SQL Serve ...

  9. [生成树][Uva1395][Slim Span]

    代码: #include <set> #include <queue> #include <cmath> #include <cstdio> #incl ...

  10. Sublime Text插件FileHeader实践

    FileHeader是一个文件模板插件,可以定制各种文件模板和文件头部信息,保存时可以自动更新文件的修改时间.在多人开发中这个功能相当实用. 具体介绍我就不细说了,主要是分享一下在使用FileHead ...