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 相关文章推荐
javascript 写类方式之六
Jul 05 Javascript
Jquery下判断Id是否存在的代码
Jan 06 Javascript
node.js中的socket.io入门实例
Apr 26 Javascript
Javascript中3个需要注意的运算符
Apr 02 Javascript
jQuery中(function($){})(jQuery)详解
Jul 15 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
Sep 17 Javascript
详谈js中数组(array)和对象(object)的区别
Feb 27 Javascript
深入浅析Vue.js中 computed和methods不同机制
Mar 22 Javascript
vue做移动端适配最佳解决方案(亲测有效)
Sep 04 Javascript
vue draggable resizable gorkys与v-chart使用与总结
Sep 05 Javascript
Webpack按需加载打包chunk命名的方法
Sep 22 Javascript
vue实现短信验证码输入框
Apr 17 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的输入输出流
2007/02/14 PHP
Nginx环境下PHP flush失效的解决方法
2016/10/19 PHP
[原创]静态页面也可以实现预览 列表不同的显示方式
2006/10/14 Javascript
JQuery 写的个性导航菜单
2009/12/24 Javascript
JQuery 获得绝对,相对位置的坐标方法
2010/02/09 Javascript
JSON JQUERY模板实现说明
2010/07/03 Javascript
javascript 获取网页标题代码实例
2014/01/22 Javascript
node.js中的buffer.fill方法使用说明
2014/12/14 Javascript
JQuery实现防止退格键返回的方法
2015/02/12 Javascript
深入理解JavaScript系列(36):设计模式之中介者模式详解
2015/03/04 Javascript
JavaScript获得表单target属性的方法
2015/04/02 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
2015/08/25 Javascript
JavaScript实现移动端滑动选择日期功能
2016/06/21 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
2016/11/09 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
2017/01/05 Javascript
详解angularjs popup-table 弹出框表格指令
2017/09/20 Javascript
基于jQuery使用Ajax动态执行模糊查询功能
2018/07/05 jQuery
Node.js console控制台简单用法分析
2019/01/04 Javascript
JSON基本语法及与JavaScript的异同实例分析
2019/01/04 Javascript
VUE 实现复制内容到剪贴板的两种方法
2019/04/24 Javascript
使用js在layui中实现上传图片压缩
2019/06/18 Javascript
JavaScript switch语句使用方法简介
2019/12/30 Javascript
python 快速排序代码
2009/11/23 Python
python通过定义一个类实例作为ftp回调方法
2015/05/04 Python
Python实现将json文件中向量写入Excel的方法
2018/03/26 Python
python3 re返回形式总结
2020/11/20 Python
python openssl模块安装及用法
2020/12/06 Python
Algenist奥杰尼官网:微藻抗衰老护肤品牌
2017/07/15 全球购物
室内设计专业个人的自我评价
2013/10/19 职场文书
高中考试作弊检讨书
2014/01/14 职场文书
幼儿园六一儿童节文艺汇演主持词
2014/03/21 职场文书
2015年小学师德师风建设工作总结
2015/10/23 职场文书
2019暑假阅读倡议书
2019/06/24 职场文书
环境保护宣传标语大全!
2019/06/28 职场文书
JavaScript实现简单的音乐播放器
2022/08/14 Javascript
使用CSS实现音波加载效果
2023/05/07 HTML / CSS