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 相关文章推荐
用ADODB.Stream转换
Jan 22 Javascript
javascript 图片上传预览-兼容标准
Jun 01 Javascript
JQuery右键菜单插件ContextMenu使用指南
Dec 19 Javascript
JavaScript实现鼠标滑过图片变换效果的方法
Apr 16 Javascript
深入浅析Bootstrap列表组组件
May 03 Javascript
js实现上下左右弹框划出效果
Mar 08 Javascript
jQuery轻松实现无缝轮播效果
Mar 22 jQuery
详解如何提高 webpack 构建 Vue 项目的速度
Jul 03 Javascript
JS为什么说async/await是generator的语法糖详解
Jul 11 Javascript
小程序跳转H5页面的方法步骤
Mar 06 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
Apr 17 Javascript
JavaScript实时更新当前的时间的示例代码
Jul 15 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
Codeigniter框架的更新事务(transaction)BUG及解决方法
2014/07/25 PHP
php实现指定字符串中查找子字符串的方法
2015/03/17 PHP
Zend Framework教程之MVC框架的Controller用法分析
2016/03/07 PHP
PHP单链表的实现代码
2016/07/05 PHP
php is_writable判断文件是否可写实例代码
2016/10/13 PHP
PHP 常用时间函数资料整理
2016/10/22 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
js类后台管理菜单类-MenuSwitch
2007/09/12 Javascript
JQuery each()函数如何优化循环DOM结构的性能
2012/12/10 Javascript
jquery修改网页背景颜色通过css方法实现
2014/06/06 Javascript
JS实现的不规则TAB选项卡效果代码
2015/09/18 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
2016/05/26 Javascript
Vue和Bootstrap的整合思路详解
2017/06/30 Javascript
js+html5生成自动排列对话框实例
2017/10/09 Javascript
vue使用 better-scroll的参数和方法详解
2018/01/25 Javascript
Node.js 多线程完全指南总结
2019/03/27 Javascript
JS实现的排列组合算法示例
2019/07/16 Javascript
基于layPage插件实现两种分页方式浅析
2019/07/27 Javascript
关于引入vue.js 文件的知识点总结
2020/01/28 Javascript
js+html+css实现手动轮播和自动轮播
2020/12/30 Javascript
Python使用requests及BeautifulSoup构建爬虫实例代码
2018/01/24 Python
Matplotlib 生成不同大小的subplots实例
2018/05/25 Python
Python多继承原理与用法示例
2018/08/23 Python
纯python进行矩阵的相乘运算的方法示例
2019/07/17 Python
如何解决django-celery启动后迅速关闭
2019/10/16 Python
python+selenium 简易地疫情信息自动打卡签到功能的实现代码
2020/08/22 Python
CSS伪类与CSS伪元素的区别及由来具体说明
2012/12/07 HTML / CSS
日本高端护肤品牌:Tatcha
2016/08/29 全球购物
.NET笔试题(20个问题)
2016/02/02 面试题
软件工程师岗位职责
2013/11/16 职场文书
检察机关个人对照检查材料
2014/09/15 职场文书
2014年档案室工作总结
2014/12/01 职场文书
房地产公司财务总监岗位职责
2015/04/03 职场文书
2015年四年级班主任工作总结
2015/10/22 职场文书
css position fixed 左右双定位的实现代码
2021/04/29 HTML / CSS
mongoDB数据库索引快速入门指南
2022/03/23 MongoDB