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 相关文章推荐
jQuery maxlength文本字数限制插件
Apr 16 Javascript
window.ActiveXObject使用说明
Nov 08 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
Jan 31 Javascript
jQuery中before()方法用法实例
Dec 25 Javascript
jQuery Ajax调用WCF服务详细教程
Mar 31 Javascript
jquery简单实现网页层的展开与收缩效果
Aug 07 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
Jun 08 Javascript
jquery表单插件form使用方法详解
Jan 20 Javascript
老生常谈ES6中的类
Jul 31 Javascript
详解element-ui日期时间选择器的日期格式化问题
Apr 08 Javascript
详解vue使用$http服务端收不到参数
Apr 19 Javascript
vue实现列表拖拽排序的示例代码
Apr 08 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初学者头疼问题总结
2006/07/08 PHP
php中防止SQL注入的最佳解决方法
2013/04/25 PHP
php自定义加密与解密程序实例
2014/12/31 PHP
php等比例缩放图片及剪切图片代码分享
2016/02/13 PHP
PHP用正则匹配form表单中所有元素的类型和属性值实例代码
2017/02/28 PHP
javascript 无提示关闭窗口脚本
2009/08/17 Javascript
JS中的substring和substr函数的区别说明
2013/05/07 Javascript
javascript自动给文本url地址增加链接的方法分享
2014/01/20 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
2015/03/03 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
2016/01/10 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
2016/03/28 Javascript
jQuery实现点击查看大图并以弹框的形式居中
2016/08/08 Javascript
原生js实现网易轮播图效果
2020/04/10 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
2016/11/21 Javascript
数组Array的排序sort方法
2017/02/17 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
2018/01/13 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
2018/08/20 Javascript
vue 优化CDN加速的方法示例
2018/09/19 Javascript
jquery选择器和属性对象的操作实例分析
2020/01/10 jQuery
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
2020/11/18 Vue.js
[03:42]2014DOTA2西雅图国际邀请赛 Navi战队巡礼
2014/07/07 DOTA
Python时区设置方法与pytz查询时区教程
2013/11/27 Python
python字符串中的单双引
2017/02/16 Python
python中类和实例如何绑定属性与方法示例详解
2017/08/18 Python
python获取代理IP的实例分享
2018/05/07 Python
python实现反转部分单向链表
2018/09/27 Python
Python hexstring-list-str之间的转换方法
2019/06/12 Python
pyinstaller打包程序exe踩过的坑
2019/11/19 Python
25岁生日感言
2014/01/13 职场文书
大学生学习2014全国两会心得体会
2014/03/13 职场文书
入党思想汇报怎么写
2014/04/03 职场文书
竞选班干部演讲稿400字
2014/08/20 职场文书
2014年房地产工作总结范文
2014/11/19 职场文书
工程安全生产协议书
2014/11/21 职场文书
假如给我三天光明读书笔记
2015/06/26 职场文书
投诉信回复范文
2015/07/03 职场文书