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 相关文章推荐
基于jquery实现图片广告轮换效果代码
Jul 07 Javascript
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
Nov 05 Javascript
简约JS日历控件 实例代码
Jul 12 Javascript
javaScript函数中执行C#代码中的函数方法总结
Aug 07 Javascript
初步认识JavaScript函数库jQuery
Jun 18 Javascript
鼠标经过子元素触发mouseout,mouseover事件的解决方案
Jul 26 Javascript
AngularJS实现表单手动验证和表单自动验证
Dec 09 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
Nov 30 Javascript
浅谈JS封闭函数、闭包、内置对象
Jul 18 Javascript
vue技术分享之你可能不知道的7个秘密
Apr 09 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
Jan 03 Javascript
JS扁平化输出数组的2种方法解析
Sep 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
PHP4之COOKIE支持详解
2006/10/09 PHP
php &amp;&amp; 逻辑与运算符使用说明
2010/03/04 PHP
php文件上传的例子及参数详解
2013/12/12 PHP
PHP6新特性分析
2016/03/03 PHP
php源码 fsockopen获取网页内容实例详解
2016/09/24 PHP
PHP基于自增数据如何生成不重复的随机数示例
2017/05/19 PHP
JQUERY复选框CHECKBOX全选,取消全选
2008/08/30 Javascript
解析JavaScript中点号“.”的多义性
2013/12/02 Javascript
jquery制作弹窗提示窗口代码分享
2014/03/02 Javascript
FullCalendar日历插件应用之数据展现(一)
2015/12/23 Javascript
Javascript基础_标记文字的实现方法
2016/06/14 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
2017/08/04 Javascript
swiper自定义分页器使用方法详解
2020/09/14 Javascript
webpack4 升级迁移的实现
2018/09/12 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
2018/10/11 Javascript
JavaScript多种页面刷新方法小结
2019/04/04 Javascript
[57:59]EG vs Secret 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
举例讲解Python中的算数运算符的用法
2015/05/13 Python
Python操作mysql数据库实现增删查改功能的方法
2018/01/15 Python
浅谈numpy数组中冒号和负号的含义
2018/04/18 Python
Python查找文件中包含中文的行方法
2018/12/19 Python
Python实现微信自动好友验证,自动回复,发送群聊链接方法
2019/02/21 Python
详解Python计算机视觉 图像扭曲(仿射扭曲)
2019/03/27 Python
Python中的 ansible 动态Inventory 脚本
2020/01/19 Python
Python3如何在服务器打印资产信息
2020/08/27 Python
如何快速理解python的垃圾回收机制
2020/09/01 Python
全球速卖通西班牙站:AliExpress西班牙
2017/10/30 全球购物
彪马日本官网:PUMA日本
2019/01/31 全球购物
德国珠宝和手表在线商店:VALMANO
2019/03/24 全球购物
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2012/04/17 面试题
如何安装ruby on rails
2014/02/09 面试题
函授本科自我鉴定
2014/02/04 职场文书
见习期自我鉴定范文
2014/03/19 职场文书
处级干部考察材料
2014/12/24 职场文书
2016年寒假社会实践活动总结
2015/03/27 职场文书
Java 写一个简单的图书管理系统
2022/04/26 Java/Android