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 相关文章推荐
IE8 chrome中table隔行换色解决办法
Jul 09 Javascript
使用Java实现简单的server/client回显功能的方法介绍
May 03 Javascript
JavaScript中的this关键字使用详解
Aug 14 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
Sep 07 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
Dec 19 Javascript
js实现带三角符的手风琴效果
Mar 01 Javascript
js中的触发事件对象event.srcElement与event.target详解
Mar 15 Javascript
在小程序中使用Echart图表的示例代码
Aug 02 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
May 29 Javascript
小程序调用微信支付的方法
Sep 26 Javascript
使用p5.js临摹动态图形
Oct 23 Javascript
解决vuex数据异步造成初始化的时候没值报错问题
Nov 13 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程序的php代码
2008/04/07 PHP
php实现RSA加密类实例
2015/03/26 PHP
iis6手工创建网站后无法运行php脚本的解决方法
2017/06/08 PHP
Laravel源码解析之路由的使用和示例详解
2018/09/27 PHP
JQUERY 对象与DOM对象之两者相互间的转换
2009/04/27 Javascript
js数组的操作详解
2013/03/27 Javascript
jQuery实现复选框成对选择及对应取消的方法
2015/03/03 Javascript
关于JS中的方法是否加括号的问题
2016/07/27 Javascript
如何快速上手Vuex
2017/02/14 Javascript
用nodeJS搭建本地文件服务器的几种方法小结
2017/03/16 NodeJs
Vue如何实现组件的源码解析
2017/06/08 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
2018/03/01 Javascript
vue.js使用v-model指令实现的数据双向绑定功能示例
2018/05/22 Javascript
Nodejs异步回调之异常处理实例分析
2018/06/22 NodeJs
vue.js使用v-if实现显示与隐藏功能示例
2018/07/06 Javascript
webpack4 处理SCSS的方法示例
2018/09/03 Javascript
Nuxt.js开启SSR渲染的教程详解
2018/11/30 Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
2019/12/06 Javascript
[47:22]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
跨平台python异步回调机制实现和使用方法
2013/11/26 Python
Python标准库06之子进程 (subprocess包) 详解
2016/12/07 Python
python Pandas 读取txt表格的实例
2018/04/29 Python
Python-接口开发入门解析
2019/08/01 Python
django foreignkey外键使用的例子 相当于left join
2019/08/06 Python
django中瀑布流写法实例代码
2019/10/14 Python
浅析matlab中imadjust函数
2020/02/27 Python
CSS3结构性伪类选择器九种写法
2012/04/18 HTML / CSS
CSS3 中的@keyframes介绍
2014/09/02 HTML / CSS
C有"按引用传递"吗
2016/09/06 面试题
大学本科生的个人自我评价
2013/12/09 职场文书
公司会计主管岗位责任制
2014/03/01 职场文书
初三开学计划书
2014/04/27 职场文书
研发工程师岗位职责
2014/04/28 职场文书
活动总结范文
2014/08/30 职场文书
就业指导讲座心得体会
2016/01/15 职场文书
搞笑Gif:这么白这么长的腿像极了一楼的女朋友
2022/03/21 杂记