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 兼容firefox的一些问题
May 21 Javascript
JS 无限级 Select效果实现代码(json格式)
Aug 30 Javascript
js 获取屏幕各种宽高的方法(浏览器兼容)
May 15 Javascript
JavaScript 动态加载脚本和样式的方法
Apr 13 Javascript
javascript 中的 delete及delete运算符
Nov 15 Javascript
bootstrap的3级菜单样式,支持母版页保留打开状态实现方法
Nov 10 Javascript
bootstrap table表格使用方法详解
Apr 26 Javascript
Vue注册组件命名时不能用大写的原因浅析
Apr 25 Javascript
JS字符串与二进制的相互转化实例代码详解
Jun 28 Javascript
Webpack设置环境变量的一些误区详解
Dec 19 Javascript
vue 微信扫码登录(自定义样式)
Jan 06 Javascript
基于react项目打包css引用路径错误解决方案
Oct 28 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 判断常量,变量和函数是否存在
2009/04/26 PHP
php不用内置函数对数组排序的两个算法代码
2010/02/08 PHP
PHP使用json_encode函数时不转义中文的解决方法
2014/11/12 PHP
几个实用的PHP内置函数使用指南
2014/11/27 PHP
基于PHP实现用户注册登录功能
2016/10/14 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
详解提高使用Java反射的效率方法
2019/04/29 PHP
2020最新版 PhpStudy V8.1版本下载安装使用详解
2020/10/30 PHP
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
2010/03/08 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
2014/08/10 Javascript
用js读写cookie的简单方法(推荐)
2016/08/08 Javascript
angular和BootStrap3实现购物车功能
2017/01/25 Javascript
移动端使用localResizeIMG4压缩图片
2017/04/22 Javascript
bootstrap选项卡扩展功能详解
2017/06/14 Javascript
angularjs实现时间轴效果的示例代码
2017/11/29 Javascript
详解JavaScript的BUG和错误
2018/05/07 Javascript
微信小程序-form表单提交代码实例
2019/04/29 Javascript
使用express来代理服务的方法
2019/06/21 Javascript
详解ES6中class的实现原理
2020/10/03 Javascript
微信小程序选择图片控件
2021/01/19 Javascript
[01:03:54]Liquid vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python的re模块应用实例
2014/09/26 Python
解决Python中由于logging模块误用导致的内存泄露
2015/04/23 Python
使用Python脚本将绝对url替换为相对url的教程
2015/04/24 Python
python3 发送任意文件邮件的实例
2018/01/23 Python
python实现pdf转换成word/txt纯文本文件
2018/06/07 Python
解析python 中/ 和 % 和 //(地板除)
2020/06/28 Python
selenium携带cookies模拟登陆CSDN的实现
2021/01/19 Python
美国受欢迎的眼影品牌:BH Cosmetics
2016/10/25 全球购物
全球最大的在线旅游公司:Expedia
2017/11/16 全球购物
英国最受欢迎的母婴精品品牌:JoJo Maman BéBé
2021/02/17 全球购物
生产经理的自我评价分享
2013/11/07 职场文书
岗位廉洁从业承诺书
2014/03/28 职场文书
设计专业自荐信
2014/06/19 职场文书
工会趣味活动方案
2014/08/18 职场文书
上诉答辩状范文
2015/05/22 职场文书