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 相关文章推荐
对google个性主页的拖拽效果的js的完整注释[转]
Apr 10 Javascript
让Firefox支持event对象实现代码
Nov 07 Javascript
js鼠标左右键 键盘值小结
Jun 11 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
Aug 23 Javascript
jQuery层级选择器实例代码
Feb 06 Javascript
Nuxt配合Node在实际生产中的应用详解
Aug 07 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
Feb 20 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
Feb 22 Javascript
微信小程序用户授权,以及判断登录是否过期的方法
May 10 Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
Jul 05 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
Apr 08 Javascript
vue+flask实现视频合成功能(拖拽上传)
Mar 04 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/11/25 PHP
Smarty结合Ajax实现无刷新留言本实例
2007/01/02 PHP
PHP中的traits实现代码复用使用实例
2015/05/13 PHP
Laravel 不同生产环境服务器的判断实践
2019/10/15 PHP
PHP实现抽奖功能实例代码
2020/06/30 PHP
Prototype使用指南之selector.js说明
2008/10/26 Javascript
jquery multiSelect 多选下拉框
2010/07/09 Javascript
jquery插件之easing使用
2010/08/19 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
2013/01/02 Javascript
Js实现自定义右键行为
2015/03/26 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
2016/05/03 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/09/29 Javascript
浅谈jQuery中Ajax事件beforesend及各参数含义
2016/12/03 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
2017/03/30 Javascript
基于JS脚本语言的基础语法详解
2017/07/22 Javascript
基于Vue框架vux组件库实现上拉刷新功能
2017/11/28 Javascript
微信小程序+腾讯地图开发实现路径规划绘制
2019/05/22 Javascript
vue 实现超长文本截取,悬浮框提示
2020/07/29 Javascript
uniapp实现可滑动选项卡
2020/10/21 Javascript
在Windows8上的搭建Python和Django环境
2014/07/03 Python
在Python中使用列表生成式的教程
2015/04/27 Python
Python实现XML文件解析的示例代码
2018/02/05 Python
python 对dataframe下面的值进行大规模赋值方法
2018/06/09 Python
Python将列表数据写入文件(txt, csv,excel)
2019/04/03 Python
如何在Django中使用聚合的实现示例
2020/03/23 Python
css3中背景尺寸background-size详解
2014/09/02 HTML / CSS
澳大利亚领先的皮肤诊所:Skin Matrix(抗衰老、痤疮专家、药妆护肤)
2018/05/20 全球购物
EJB3.1都有哪些改进
2012/11/17 面试题
办公室文员自荐书
2014/02/03 职场文书
文化活动实施方案
2014/03/28 职场文书
三严三实对照检查材料
2014/08/25 职场文书
2015年村级财务管理制度
2015/08/04 职场文书
Nginx中break与last的区别详析
2021/03/31 Servers
PostgreSQL存储过程实用脚本(二):创建函数入门
2021/04/05 PostgreSQL
如何用Python搭建gRPC服务
2021/06/30 Python
CSS3实现360度循环旋转功能
2022/02/12 HTML / CSS