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 Lightbox 图片展示插件使用说明
Apr 25 Javascript
JS中获取数据库中的值的方法
Jul 14 Javascript
纯JS实现根据CSS的class选择DOM
Mar 22 Javascript
实现js保留小数点后N位的代码
Nov 13 Javascript
jQuery获得子元素个数的方法
Apr 14 Javascript
JS+CSS实现滑动切换tab菜单效果
Aug 25 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
Mar 09 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
Mar 30 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
May 15 Javascript
JS实现动态星空背景效果
Nov 01 Javascript
解决vue-router 切换tab标签关闭时缓存问题
Jul 22 Javascript
结合axios对项目中的api请求进行封装操作
Sep 21 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 mssql 分页SQL语句优化 持续影响
2009/04/26 PHP
PHP错误抑制符(@)导致引用传参失败Bug的分析
2011/05/02 PHP
destoon官方标签大全
2014/06/20 PHP
php简单截取字符串代码示例
2016/10/19 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
JS 操作符整理[推荐收藏]
2011/11/15 Javascript
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
2011/12/20 Javascript
jquery ajax属性async(同步异步)示例
2013/11/05 Javascript
鼠标移到图片上变大显示而不是放大镜效果
2014/06/15 Javascript
Javascript非构造函数的继承
2015/04/27 Javascript
jquery实现图片放大镜功能
2015/11/23 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
2016/06/15 Javascript
jquery操作ul的一些操作笔记整理(干货)
2017/08/31 jQuery
JavaScript DOM元素常见操作详解【添加、删除、修改等】
2018/05/09 Javascript
微信小程序实现滴滴导航tab切换效果
2018/07/24 Javascript
Nodejs 微信小程序消息推送的实现
2021/01/20 NodeJs
python中星号变量的几种特殊用法
2016/09/07 Python
python读取与写入csv格式文件的示例代码
2017/12/16 Python
python 将数据保存为excel的xls格式(实例讲解)
2018/05/03 Python
Python基于分析Ajax请求实现抓取今日头条街拍图集功能示例
2018/07/19 Python
Python抽象和自定义类定义与用法示例
2018/08/23 Python
python做反被爬保护的方法
2019/07/01 Python
python 实现查询Neo4j多节点的多层关系
2019/12/23 Python
Python基础之字符串操作常用函数集合
2020/02/09 Python
python collections模块的使用
2020/10/16 Python
纯CSS3实现的阴影效果
2014/12/24 HTML / CSS
HTML5 body设置全屏背景图片的示例代码
2020/12/08 HTML / CSS
ONLY德国官方在线商店:购买时尚女装
2017/09/21 全球购物
耐克亚太地区:Nike APAC
2019/12/07 全球购物
自考自我鉴定范文
2013/10/30 职场文书
最新教师自我评价分享
2013/11/12 职场文书
社区党员先进事迹
2014/01/22 职场文书
纪律教育学习月活动总结
2014/08/27 职场文书
村当支部个人对照检查材料思想汇报
2014/10/06 职场文书
JS不要再到处使用绝对等于运算符了
2021/04/30 Javascript