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 通过事件委派一次绑定多种事件,以减少事件冗余
Jun 30 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
Oct 21 Javascript
深入理解node exports和module.exports区别
Jun 01 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
Aug 04 Javascript
javascript将list转换成树状结构的实例
Sep 08 Javascript
微信小程序picker组件简单用法示例【附demo源码下载】
Dec 05 Javascript
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
vue2.0路由切换后页面滚动位置不变BUG的解决方法
Mar 14 Javascript
微信小程序上线发布流程图文详解
May 06 Javascript
浅谈JS的原型和继承
May 08 Javascript
pageGroup.js实现分页功能
Jul 27 Javascript
vue-iview动态新增和删除的方法
Jun 17 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-5.2 的 php.ini 中文版[金步国翻译]
2011/04/17 PHP
ThinkPHP连接数据库及主从数据库的设置教程
2014/08/22 PHP
一个php生成16位随机数的代码(两种方法)
2014/09/16 PHP
php中的字符编码转换函数用法示例
2014/10/20 PHP
浅析THINKPHP的addAll支持的最大数据量
2015/02/03 PHP
ThinkPHP实现更新数据实例详解(demo)
2016/06/29 PHP
PHP实现多关键字加亮功能
2016/10/21 PHP
PHP实现接收二进制流转换成图片的方法
2017/01/10 PHP
php字符集转换
2017/01/23 PHP
原生JavaScript制作微博发布面板效果
2016/03/11 Javascript
javascript Promise简单学习使用方法小结
2016/05/17 Javascript
JQuery.validate在ie8下不支持的快速解决方法
2016/05/18 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
2017/01/18 Javascript
微信小程序之GET请求的实例详解
2017/09/29 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
2017/12/14 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
2018/04/26 Javascript
JS实现Cookie读、写、删除操作工具类示例
2018/08/28 Javascript
ES6基础之 Promise 对象用法实例详解
2019/08/22 Javascript
javascript局部自定义鼠标右键菜单
2020/12/08 Javascript
[02:36]DOTA2混沌骑士 英雄基础教程
2013/11/26 DOTA
Python检测QQ在线状态的方法
2015/05/09 Python
python机器学习实战之K均值聚类
2017/12/20 Python
python 3.6.5 安装配置方法图文教程
2018/09/18 Python
python实现接口并发测试脚本
2019/06/25 Python
python使用pygame实现笑脸乒乓球弹珠球游戏
2019/11/25 Python
Python Pillow.Image 图像保存和参数选择方式
2020/01/09 Python
python json 递归打印所有json子节点信息的例子
2020/02/27 Python
python百行代码自制电脑端网速悬浮窗的实现
2020/05/12 Python
Python importlib模块重载使用方法详解
2020/10/13 Python
Python基于opencv的简单图像轮廓形状识别(全网最简单最少代码)
2021/01/28 Python
SmartBuyGlasses英国:购买太阳镜和眼镜
2018/01/29 全球购物
DataList 能否分页,请问如何实现?
2015/05/03 面试题
给学校的建议书范文
2014/05/15 职场文书
解除同居协议书
2015/01/29 职场文书
2016继续教育培训学习心得体会
2016/01/19 职场文书
工作建议书范文
2019/07/08 职场文书