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 相关文章推荐
js计数器代码
Nov 04 Javascript
javascript为下拉列表动态添加数据项
May 23 Javascript
QQ空间顶部折页撕开效果示例代码
Jun 15 Javascript
JS实现图片无间断滚动代码汇总
Jul 30 Javascript
jQuery中clone()方法用法实例
Jan 16 Javascript
javascript作用域、作用域链(菜鸟必看)
Jun 16 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
Sep 09 Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
Jan 04 Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
Jan 23 Javascript
Bootstrap实现翻页效果
Nov 27 Javascript
Vue写一个简单的倒计时按钮功能
Apr 20 Javascript
Vue项目路由刷新的实现代码
Apr 17 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
模拟flock实现文件锁定
2007/02/14 PHP
支持中文的PHP按字符串长度分割成数组代码
2015/05/17 PHP
Yii2实现ajax上传图片插件用法
2016/04/28 PHP
Yii2 rbac权限控制操作步骤实例教程
2016/04/29 PHP
[原创]PHPCMS遭遇会员投稿审核无效的解决方法
2017/01/11 PHP
PHP并发查询MySQL的实例代码
2017/08/09 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
JavaScript与C# Windows应用程序交互方法
2007/06/29 Javascript
地址栏传递中文参数乱码在js里用escape转码
2013/08/28 Javascript
jQuery级联操作绑定事件实例
2014/09/02 Javascript
使用javascript实现简单的选项卡切换
2015/01/09 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
Bootstrap零基础入门教程(二)
2016/07/18 Javascript
vue高德地图之玩转周边
2017/06/16 Javascript
使用angular帮你实现拖拽的示例
2017/07/05 Javascript
javascript回调函数详解
2018/02/06 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
2020/08/27 Javascript
Node在Controller层进行数据校验的过程详解
2020/08/28 Javascript
ajax jquery实现页面某一个div的刷新效果
2021/03/04 jQuery
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
2018/07/12 HTML / CSS
倩碧澳大利亚官网:Clinique澳大利亚
2019/07/22 全球购物
你在项目中用到了xml技术的哪些方面?如何实现的?
2014/01/26 面试题
热能动力工程毕业生自荐信
2013/11/07 职场文书
架构师岗位职责
2013/11/18 职场文书
校长就职演讲稿
2014/01/06 职场文书
2014年机关植树节活动方案
2014/02/27 职场文书
危爆物品安全大检查大整治工作方案
2014/05/03 职场文书
2014年感恩母亲演讲稿
2014/05/27 职场文书
护士个人总结范文
2015/02/13 职场文书
大学宣传委员竞选稿
2015/11/19 职场文书
幼儿园教师心得体会范文
2016/01/21 职场文书
2019年怎样才能撰写出优秀的自荐信
2019/03/25 职场文书
Python+uiautomator2实现自动刷抖音视频功能
2021/04/29 Python
Django实现翻页的示例代码
2021/05/24 Python
CSS+HTML 实现顶部导航栏功能
2021/08/30 HTML / CSS
Python爬虫入门案例之爬取二手房源数据
2021/10/16 Python