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 相关文章推荐
Ext javascript建立超链接,进行事件处理的实现方法
Mar 22 Javascript
jquery获取input的value问题说明
Aug 19 Javascript
JavaScript包装对象使用介绍
Aug 29 Javascript
jquery实现更改表格行顺序示例
Apr 30 Javascript
jquery实现最简单的滑动菜单效果代码
Sep 12 Javascript
通用无限极下拉菜单的实现代码
May 31 Javascript
简单实现bootstrap选项卡效果
Feb 08 Javascript
Angular.JS中的指令引用template与指令当做属性详解
Mar 30 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
Jul 05 Javascript
微信小程序网络封装(简单高效)
Aug 06 Javascript
Vue 事件处理操作实例详解
Mar 05 Javascript
JS实现页面侧边栏效果探究
Jan 08 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
最小化数据传输――在客户端存储数据
2006/10/09 PHP
PHP中ADODB类详解
2008/03/25 PHP
php防止sql注入之过滤分页参数实例
2014/11/03 PHP
php动态函数调用方法
2015/05/21 PHP
浅谈PHP的反射API
2017/02/26 PHP
php实现的顺序线性表示例
2019/05/04 PHP
php fread函数使用方法总结
2019/05/28 PHP
PHP查找一列有序数组是否包含某值的方法
2020/02/07 PHP
javascript 类方法定义还是有点区别
2009/04/15 Javascript
DIY jquery plugin - tabs标签切换实现代码
2010/12/11 Javascript
jQuery中clone()方法用法实例
2015/01/16 Javascript
JavaScript更改字符串的大小写
2015/05/07 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
2016/04/29 Javascript
js中获取时间new Date()的全面介绍
2016/06/20 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
2016/07/07 Javascript
JS实现HTML页面中动态显示当前时间完整示例
2018/07/30 Javascript
JQuery获得内容和属性方法解析
2020/05/30 jQuery
Node.js web 应用如何封装到Docker容器中
2020/09/01 Javascript
js实现简单的轮播图效果
2020/12/13 Javascript
Vue单页面应用中实现Markdown渲染
2021/02/14 Vue.js
[08:17]Ti9 现场cosplay
2019/09/10 DOTA
python中map()与zip()操作方法
2016/02/27 Python
详解Python编程中对Monkey Patch猴子补丁开发方式的运用
2016/05/27 Python
django model去掉unique_together报错的解决方案
2016/10/18 Python
Python实现的统计文章单词次数功能示例
2019/07/08 Python
python2.7使用scapy发送syn实例
2020/05/05 Python
业务副厂长岗位职责
2014/01/03 职场文书
银行领导证婚词
2014/01/11 职场文书
幼儿园教师培训制度
2014/01/16 职场文书
庆元旦迎新年广播稿
2014/02/18 职场文书
党的群众路线教育实践活动个人对照检查材料(四风)
2014/11/05 职场文书
2015年民主评议党员工作总结
2015/05/19 职场文书
离职证明格式样本
2015/06/12 职场文书
2016毕业实习单位评语大全
2015/12/01 职场文书
MySQL一些常用高级SQL语句
2021/07/03 MySQL
如何通过简单的代码描述Angular父组件、子组件传值
2022/04/07 Javascript