编程 Javascript

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中的onkeyup和onkeydown区别介绍

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript window.document的属性、方法和事件小结

Oct 24 Javascript

JS关闭窗口或JS关闭页面的几种代码分享

Oct 25 Javascript

Javascript加载速度慢的解决方案

Mar 11 Javascript

JavaScript使表单中的内容显示在屏幕上的方法

Jun 29 Javascript

Nginx上传文件全部缓存解决方案

Aug 17 Javascript

微信小程序数据访问实例详解

Oct 08 Javascript

关于javascript sort()排序你可能忽略的一点理解

Jul 18 Javascript

React native ListView 增加顶部下拉刷新和底下点击刷新示例

Apr 27 Javascript

10分钟彻底搞懂Http的强制缓存和协商缓存(小结)

Aug 30 Javascript

详解vue几种主动刷新的方法总结

Feb 19 Javascript

Element-UI中Upload上传文件前端缓存处理示例

Feb 21 Javascript

TypeScript 内置高级类型编程示例

Sep 23 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