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 相关文章推荐
B/S开发中常用javaScript技术与代码
Mar 09 Javascript
ExtJS Store的数据访问与更新问题
Apr 28 Javascript
jquery 定位input元素的几种方法小结
Jul 28 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
Mar 25 Javascript
简单了解JavaScript操作XPath的一些基本方法
Jun 03 Javascript
springMVC结合AjaxForm上传文件
Jul 12 Javascript
form+iframe解决跨域上传文件的方法
Nov 18 Javascript
js 事件的传播机制(实例讲解)
Jul 20 Javascript
基于复选框demo(分享)
Sep 27 Javascript
Vue解决echart在element的tab切换时显示不正确问题
Aug 03 Javascript
Vue中使用JsonView来展示Json树的实例代码
Nov 16 Javascript
详解React路由传参方法汇总记录
Nov 29 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
日本十大惊悚动漫
2020/03/04 日漫
PHP4实际应用经验篇(9)
2006/10/09 PHP
php daodb插入、更新与删除数据
2009/03/19 PHP
php中url传递中文字符,特殊危险字符的解决方法
2013/08/17 PHP
通过PHP简单实例介绍文件上传
2015/12/16 PHP
php双层循环(九九乘法表)
2017/10/23 PHP
使用 PHP Masked Package 屏蔽敏感数据的实现方法
2019/10/15 PHP
Javascript笔记一 js以及json基础使用说明
2010/05/22 Javascript
AJAX分页的代码(后台asp.net)
2011/02/14 Javascript
JS应用正则表达式转换大小写示例
2014/09/18 Javascript
javascript实现可全选、反选及删除表格的方法
2015/05/15 Javascript
javascript的变量、传值、传址、参数之间关系
2015/07/26 Javascript
JavaScript Promise 用法
2016/06/14 Javascript
用jmSlip编写移动端顶部日历选择控件
2016/10/24 Javascript
JS正则表达式修饰符global(/g)用法分析
2016/12/27 Javascript
Javascript实现数组中的元素上下移动
2017/04/28 Javascript
基于JavaScript实现抽奖系统
2018/01/16 Javascript
详解Webpack多环境代码打包的方法
2018/08/03 Javascript
详解使用uni-app开发微信小程序之登录模块
2019/05/09 Javascript
JavaScript 面向对象基础简单示例
2019/10/02 Javascript
Python中无限元素列表的实现方法
2014/08/18 Python
python服务器与android客户端socket通信实例
2014/11/12 Python
Python中使用PyQt把网页转换成PDF操作代码实例
2015/04/23 Python
Python之web模板应用
2017/12/26 Python
[机器视觉]使用python自动识别验证码详解
2019/05/16 Python
详解用python计算阶乘的几种方法
2019/08/14 Python
Pandas 解决dataframe的一列进行向下顺移问题
2019/12/27 Python
鱼油专家:Omegavia
2016/10/10 全球购物
Vision Directa智利眼镜网:框架眼镜、隐形眼镜和名牌太阳眼镜
2016/11/23 全球购物
美国体育用品商店:Paragon Sports
2017/10/08 全球购物
linux面试题参考答案(11)
2012/05/01 面试题
2013年大学生的自我鉴定
2013/10/24 职场文书
教师师德教育的自我评价
2013/10/31 职场文书
数学兴趣小组活动总结
2014/07/08 职场文书
中华魂放飞梦想演讲稿
2014/08/26 职场文书
2015年中秋节演讲稿
2015/03/20 职场文书