onkeyup,onkeydown和onkeypress的区别介绍


Posted in Javascript onOctober 21, 2013

msdn上有三者的区别:

名称 说明

onkeypress

这个事件在用户按下并放开任何字母数字键时发生。系统按钮(例如,箭头键和功能键)无法得到识别。

onkeyup

这个事件在用户放开任何先前按下的键盘键时发生。

onkeydown

这个事件在用户按下任何键盘键(包括系统按钮,如箭头键和功能键)时发生。

======================

<html> 
<script> 
function checkForm(){ 
if(event.keyCode ==13){ 
event.keyCode =9; 
} 
} 
</script> 
<body> 
<form name ="form1"> 
<input type="text" name = "text1" onkeydown = "checkForm()"> 
<input type="button" name = "button1" value="按钮"> 
</form> 
</body> 
</html>

当按下回车时,焦点从文本框移到按钮上。如果把它换成“onkeypress”,焦点不会转移,也不会失去。但是如果换成“onkeyup”,则失去焦点,页面重新载入。

测试发现onkeydown 事件最先执行,其次是onkeypress,最后是onkeyup;onkeydown 和onkeypress会影响onkeyup的执行。三个事件同事在的话,都是alert的话,只会弹出2个alert,up事件的alert不会弹出。

三者在事件的响应上还有一点不同,就是onkeydown 、onkeypress事件响应的时候输入的字符并没有被系统接受,而响应onkeyup的时候,输入流已经被系统接受。由于onkeydown 比onkeypress先执行,再根据上面的例子可以知道,onkeydown 触发的时候输入流正要进入系统,也就是说onkeydown 事件一完,输入流就进入了系统,无法改变。所以通过onkeydown 事件可以改变用户是按了哪个键;而onkeypress事件则是在输入流进入系统后触发的,但输入流暂未被系统处理,此时已经不能改变输入流了;onkeyup则是输入流被系统处理后发生的。

Javascript 相关文章推荐
可以文本显示的公告栏的js代码
Mar 11 Javascript
JavaScript splice()方法详解
Sep 22 Javascript
jquery垂直公告滚动实现代码
Dec 08 Javascript
JavaScript中0和&quot;&quot;比较引发的问题
May 26 Javascript
遍历js中对象的属性和值的实例
Nov 21 Javascript
js cookie实现记住密码功能
Jan 17 Javascript
bootstrap基本配置_动力节点Java学院整理
Jul 14 Javascript
js 获取json数组里面数组的长度实例
Oct 31 Javascript
代码详解Vuejs响应式原理
Dec 20 Javascript
结合Vue控制字符和字节的显示个数的示例
May 17 Javascript
JavaScript 继承 封装 多态实现及原理详解
Jul 29 Javascript
vue跳转方式(打开新页面)及传参操作示例
Jan 26 Javascript
兼容FF和IE的动态table示例自写
Oct 21 #Javascript
用Js实现的动态增加表格示例自己写的
Oct 21 #Javascript
可以用鼠标拖动的DIV实现思路及代码
Oct 21 #Javascript
JS中的this变量的使用介绍
Oct 21 #Javascript
JS对select控件option选项的增删改查示例代码
Oct 21 #Javascript
js传参数受特殊字符影响错误的解决方法
Oct 21 #Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
Oct 21 #Javascript
You might like
php中变量及部分适用方法
2008/03/27 PHP
IIS下PHP连接数据库提示mysql undefined function mysql_connect()
2010/06/04 PHP
PHP常用开发函数解析之数组篇[未完结]
2012/07/30 PHP
php获取Google机器人访问足迹的方法
2015/04/15 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
JavaScript静态的动态
2006/09/18 Javascript
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
2010/01/05 Javascript
js图片延迟加载的实现方法及思路
2013/07/22 Javascript
日常收藏的jquery技巧
2015/12/02 Javascript
JS实现鼠标框选效果完整实例
2016/06/20 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
2016/08/02 Javascript
javascript汉字拼音互转的简单实例
2016/10/09 Javascript
BootStrap的两种模态框方式
2017/05/10 Javascript
jQuery滚动插件scrollable.js用法分析
2017/05/25 jQuery
jQuery UI Draggable + Sortable 结合使用(实例讲解)
2017/09/07 jQuery
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
2017/10/24 Javascript
使用Vue.js中的过滤器实现幂方求值的方法
2019/08/27 Javascript
vue使用codemirror的两种用法
2019/08/27 Javascript
Python pass详细介绍及实例代码
2016/11/24 Python
全面了解Nginx, WSGI, Flask之间的关系
2018/01/09 Python
python2.7实现FTP文件下载功能
2018/04/15 Python
不归路系列:Python入门之旅-一定要注意缩进!!!(推荐)
2019/04/16 Python
Python datetime包函数简单介绍
2019/08/28 Python
用python实现英文字母和相应序数转换的方法
2019/09/18 Python
Python数组并集交集补集代码实例
2020/02/18 Python
django使用F方法更新一个对象多个对象字段的实现
2020/03/28 Python
python上selenium的弹框操作实现
2020/07/13 Python
Python tkinter制作单机五子棋游戏
2020/09/14 Python
Django视图类型总结
2021/02/17 Python
实习生自荐信范文
2013/11/13 职场文书
检讨书模板
2015/01/29 职场文书
使用springboot暴露oracle数据接口的问题
2021/05/07 Oracle
Python Django获取URL中的数据详解
2021/11/01 Python
浅谈redis的过期时间设置和过期删除机制
2022/03/18 MySQL
Android 中的类文件和类加载器详情
2022/06/05 Java/Android
Apache Kafka 分区重分配的实现原理解析
2022/07/15 Servers