经过测试,显然事件执行的顺序是: 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. 评教数据整理专用VBA小程序

    这次评教的所有数据存放在两个数据库中,比如说给某教师评论的学生有100个,可是结果有40个的数据在数据库A中,另外60人的数据在数据库B中.那么,如何将两个库中的数据整合,最后得到教师的准确成绩成为了 ...

  2. VS2012+SQL2008+ODBC编程,第一篇博客,写的不好忘各位大神指点一二~

    近期写一个数据库的课程设计,用的是C++ MFC .最開始用的是ADO技术,可是苦于网上大部分的教程都是VC6.0的,对着教程敲了4,5遍还是执行不成功.我用的IDE是VS2012,毕竟VC6.0和V ...

  3. ibatis错误汇总

    1) 错误:The prefix "context" for element "context:property-placeholder" is not bou ...

  4. Single Number(JAVA)

    Given an array of integers, every element appears twice except for one. Find that single one. Note: ...

  5. 常用工具类,文件和内存的大小获取,shell脚本的执行

    /* * Copyright (C) 2012 The Android Open Source Project * * Licensed under the Apache License, Versi ...

  6. 在Django里查询数据库时,如何按照desc倒序返回数据?

    按照entry_date从小到大查询数据,可以写成: Content.objects.order_by('entry_date') 从大到小排序: Content.objects.order_by(' ...

  7. python 源代码分析之调试设置

    首先在官方下载源代码,我下载的是最新版本3.4.3版本:https://www.python.org/ftp/python/3.4.3/Python-3.4.3.tgz 解压后的目录如下(借用网上的目 ...

  8. Big Number(大数)

    Big Number Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total ...

  9. Hibernate 体系结构简述

    SessionFactory: Hibernate的关键对象,它是单个数据库映射关系经过编译后的内存镜像,同时它是线程安全的.它是生成Session的工厂,本身需要依赖于ConnectionProvi ...

  10. 九章算法系列(#2 Binary Search)-课堂笔记

    前言 先说一些题外的东西吧.受到春跃大神的影响和启发,推荐了这个算法公开课给我,晚上睡觉前点开一看发现课还有两天要开始,本着要好好系统地学习一下算法,于是就爬起来拉上两个小伙伴组团报名了.今天听了第一 ...