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 相关文章推荐
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
May 07 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
Feb 24 Javascript
Windows8下搭建Node.js开发环境教程
Sep 03 Javascript
JQuery中使用.each()遍历元素学习笔记
Nov 08 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
Apr 03 Javascript
分享9点个人认为比较重要的javascript 编程技巧
Apr 27 Javascript
JS实现完全语义化的网页选项卡效果代码
Sep 15 Javascript
webpack中CommonsChunkPlugin详细教程(小结)
Nov 09 Javascript
AngularJs用户输入动态模板XSS攻击示例详解
Apr 21 Javascript
inquirer.js一个用户与命令行交互的工具详解
May 18 Javascript
Vue循环中多个input绑定指定v-model实例
Aug 31 Javascript
如何让vue长列表快速加载
Mar 29 Vue.js
兼容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验证码
2015/05/04 PHP
php post json参数的传递和接收处理方法
2018/05/31 PHP
Jquery 学习笔记(一)
2009/10/13 Javascript
JavaScript下利用fso判断文件是否存在的代码
2010/12/11 Javascript
善用事件代理,警惕闭包的性能陷阱。
2011/01/20 Javascript
瀑布流布局代码一例
2014/04/11 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
2020/11/18 Javascript
JS学习之表格的排序简单实例
2016/05/16 Javascript
打字效果动画的4种实现方法(超简单)
2017/10/18 Javascript
es6数据变更同步到视图层的方法
2019/03/04 Javascript
layui实现三级联动效果
2019/07/26 Javascript
js贪心算法 钱币找零问题代码实例
2019/09/11 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
2020/10/29 Javascript
python类参数self使用示例
2014/02/17 Python
Python虚拟环境virtualenv的安装与使用详解
2017/05/28 Python
NumPy.npy与pandas DataFrame的实例讲解
2018/07/09 Python
对python中词典的values值的修改或新增KEY详解
2019/01/20 Python
Python3.5基础之变量、数据结构、条件和循环语句、break与continue语句实例详解
2019/04/26 Python
django xadmin中form_layout添加字段显示方式
2020/03/30 Python
python plt可视化——打印特殊符号和制作图例代码
2020/04/17 Python
解析Python 偏函数用法全方位实现
2020/06/26 Python
python爬虫beautifulsoup解析html方法
2020/12/07 Python
巴西网上药房:onofre
2016/11/21 全球购物
生产经理的自我评价分享
2013/11/07 职场文书
门卫工作岗位职责
2013/12/17 职场文书
工会工作先进事迹
2014/08/18 职场文书
银行授权委托书格式
2014/10/10 职场文书
会计工作岗位职责
2015/02/03 职场文书
学生个人总结范文
2015/02/15 职场文书
个人总结格式范文
2015/03/09 职场文书
特种设备安全管理制度
2015/08/06 职场文书
2016班级元旦联欢会开幕词
2016/03/04 职场文书
springboot集成springCloud中gateway时启动报错的解决
2021/07/16 Java/Android
关于Vue中的options选项
2022/03/22 Vue.js
Python进程池与进程锁之语法学习
2022/04/11 Python
Android开发之WECHAT微信小程序路由跳转的两种形式
2022/04/12 Java/Android