javascript中的onkeyup和onkeydown区别介绍


Posted in Javascript onApril 28, 2013

昨天在写上次那个动态生成年月日下拉框和文本框限制输入的时候遇到了一个问题,文本框里输入的时候要开始计算文本框里面输入了多少字,自然想到了onkeydown事件,然后计算value.length的方法,看代码吧

moto.onkeydown=function(){ 
var curlen=+this.value.length; 
shuru.innerHTML=curlen; 
shuru2.innerHTML=+(200-curlen); 
if(curlen>=200){ 
this.value=this.value.substring(0,200); 
curlen=200; 
shuru.innerHTML=200; 
shuru2.innerHTML=0; 
return false; 
} 
}

结果发现文字输入完之后字数计算的不对,本来是4个字输入完之后发现发现字数还是显示0
javascript中的onkeyup和onkeydown区别介绍
想了好久,最后当吧onkeydown换成onkeyup之后,一切就好了
javascript中的onkeyup和onkeydown区别介绍
查了一下然来这两个事件是有不同的
onkeydown是按下的时候触发的,这个时候键值没有输出来。 onkeyup是按键抬起的时候执行的,这个时候键值已经有了。和按多长时间没关系,比如你给输入框加这2个事件,
<input type="text" id="test1" onkeydown="alert(this.value);"/> 
<input type="text" id="test2" onkeyup="alert(this.value);"/>

你看看这二个不同的运行结果就明白 了!
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Insert title here</title> 
</head> 
<body> 
<input type="text" id="test1" onkeydown="alert(this.value);"/> 
<input type="text" id="test2" onkeyup="alert(this.value);"/> 
</body> 
</html>

onkeydown是按下的时候触发的,这个时候键值没有输出来。
onkeyup是按键抬起的时候执行的,这个时候键值已经有了。
和按多长时间没关系,比如你给输入框加这2个事件,
Javascript 相关文章推荐
Javascript MVC框架Backbone.js详解
Sep 18 Javascript
深入理解javascript严格模式(Strict Mode)
Nov 28 Javascript
javascript实现十秒钟后注册按钮可点击的方法
May 13 Javascript
自定义刻度jQuery进度条及插件
Sep 02 Javascript
jquery实现全选、不选、反选的两种方法
Sep 06 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
Dec 14 Javascript
Node.js获取前端ajax提交的request信息
Feb 20 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
Mar 14 Javascript
JS实现可针对算术表达式求值的计算器功能示例
Sep 04 Javascript
vue-router路由模式详解(小结)
Aug 26 Javascript
原生js实现拖拽移动与缩放效果
Aug 24 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
Nov 30 Javascript
JQuery中如何传递参数如click(),change()等具体实现
Apr 28 #Javascript
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
Apr 28 #Javascript
JS中setInterval、setTimeout不能传递带参数的函数的解决方案
Apr 28 #Javascript
jquery在IE、FF浏览器的差别详细探讨
Apr 28 #Javascript
js自动下载文件到本地的实现代码
Apr 28 #Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
Apr 27 #Javascript
jQuery语法高亮插件支持各种程序源代码语法着色加亮
Apr 27 #Javascript
You might like
PHP调用JAVA的WebService简单实例
2014/03/11 PHP
PHP ADODB生成下拉列表框功能示例
2018/05/29 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
JS获取IUSR_机器名和IWAM_机器名帐号的密码
2006/12/06 Javascript
JS中 用户登录系统的解决办法
2013/04/15 Javascript
判断一个对象是否为jquery对象的方法
2014/03/12 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
2015/02/26 Javascript
javascript数据结构之双链表插入排序实例详解
2015/11/25 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
2016/12/25 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
2017/03/07 Javascript
微信小程序实现跟随菜单效果和循环嵌套加载数据
2017/11/21 Javascript
解决Mac node版本升级失败的问题
2018/05/16 Javascript
解决LayUI表单获取不到data的问题
2018/08/20 Javascript
Vue 监听列表item渲染事件方法
2018/09/06 Javascript
Python编写检测数据库SA用户的方法
2014/07/11 Python
Python的垃圾回收机制深入分析
2014/07/16 Python
python中字符串的操作方法大全
2018/06/03 Python
Python SQL查询并生成json文件操作示例
2018/08/17 Python
python 对多个csv文件分别进行处理的方法
2019/01/07 Python
Django框架 querySet功能解析
2019/09/04 Python
python GUI库图形界面开发之PyQt5 UI主线程与耗时线程分离详细方法实例
2020/02/26 Python
python实现IOU计算案例
2020/04/12 Python
新手学习Python2和Python3中print不同的用法
2020/06/09 Python
python通用数据库操作工具 pydbclib的使用简介
2020/12/21 Python
python中if嵌套命令实例讲解
2021/02/25 Python
C#公司笔试题
2014/03/28 面试题
车间主管岗位职责
2013/11/14 职场文书
兰兰过桥教学反思
2014/02/08 职场文书
幼儿园毕业教师感言
2014/02/21 职场文书
入党积极分子自我鉴定范文
2014/03/25 职场文书
工厂门卫岗位职责范本
2014/04/04 职场文书
公司捐款倡议书
2014/05/14 职场文书
白血病募捐倡议书
2014/05/14 职场文书
二年级语文下册复习计划
2015/01/19 职场文书
2015年党小组工作总结
2015/05/26 职场文书
Python机器学习应用之基于线性判别模型的分类篇详解
2022/01/18 Python