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 相关文章推荐
Jquery uploadify图片上传插件无法上传的解决方法
Dec 16 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
May 19 Javascript
JavaScript变量声明详解
Nov 27 Javascript
jquery实现简洁文件上传表单样式
Nov 02 Javascript
谈谈我对JavaScript DOM事件的理解
Dec 18 Javascript
动态创建按钮的JavaScript代码
Jan 29 Javascript
JS &amp; JQuery 动态添加 select option
Jun 08 Javascript
微信小程序 navbar实例详解
May 11 Javascript
JS代码实现电脑配置检测功能
Mar 21 Javascript
bootstrap-table实现表头固定以及列固定的方法示例
Mar 07 Javascript
Vue项目路由刷新的实现代码
Apr 17 Javascript
vue中使用mockjs配置和使用方式
Apr 06 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 获取当前访问的url文件名的方法小结
2010/02/08 PHP
php自动加载的两种实现方法
2010/06/21 PHP
破解图片防盗链的代码(asp/php)测试通过
2010/07/02 PHP
PHP使用静态方法的几个注意事项
2014/09/16 PHP
php选择排序法实现数组排序实例分析
2015/02/16 PHP
php生成图片缩略图的方法
2015/04/07 PHP
一个简单的JS时间控件示例代码(JS时分秒时间控件)
2013/11/22 Javascript
jquery实现模拟百分比进度条渐变效果代码
2015/10/29 Javascript
JavaScript判断变量是否为数组的方法(Array)
2016/02/24 Javascript
JavaScript_object基础入门(必看篇)
2016/06/13 Javascript
如何制作幻灯片(代码分享)
2017/01/06 Javascript
localStorage的黑科技-js和css缓存机制
2017/02/06 Javascript
bootstrap弹出层的多种触发方式
2017/05/10 Javascript
nodejs爬虫初试superagent和cheerio
2018/03/05 NodeJs
bootstrap table实现合并单元格效果
2018/12/24 Javascript
巧妙运用v-model实现父子组件传值的方法示例
2019/04/07 Javascript
微信小程序实现搜索框功能及踩过的坑
2020/06/19 Javascript
js实现3D粒子酷炫动态旋转特效
2020/09/13 Javascript
jquery插件实现轮播图效果
2020/10/19 jQuery
Python fileinput模块使用介绍
2014/11/30 Python
python使用pil生成图片验证码的方法
2015/05/08 Python
python函数形参用法实例分析
2015/08/04 Python
python中print的不换行即时输出的快速解决方法
2016/07/20 Python
Python入门之三角函数tan()函数实例详解
2017/11/08 Python
基于随机梯度下降的矩阵分解推荐算法(python)
2018/08/31 Python
Python实现简单层次聚类算法以及可视化
2019/03/18 Python
python之pymysql模块简单应用示例代码
2019/12/16 Python
利用python控制Autocad:pyautocad方式
2020/06/01 Python
澳大利亚Mocha官方网站:包、钱包、珠宝和配饰
2019/07/18 全球购物
C/C++程序员常见面试题一
2012/12/08 面试题
大学生旅游业创业计划书
2014/01/29 职场文书
宿舍违规用电检讨书
2014/02/16 职场文书
治超工作实施方案
2014/05/04 职场文书
镇创先争优活动总结
2014/08/28 职场文书
我爱幼儿园演讲稿
2014/09/11 职场文书
FFmpeg视频处理入门教程(新手必看)
2022/01/22 杂记