欢迎来到代码驿站!

JavaScript代码

当前位置:首页 > 网页前端 > JavaScript代码

javascript中的onkeyup和onkeydown区别介绍

时间:2020-10-08 13:26:07|栏目:JavaScript代码|点击:

昨天在写上次那个动态生成年月日下拉框和文本框限制输入的时候遇到了一个问题,文本框里输入的时候要开始计算文本框里面输入了多少字,自然想到了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

想了好久,最后当吧onkeydown换成onkeyup之后,一切就好了

查了一下然来这两个事件是有不同的
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操作web控件的自定义属性

栏    目:JavaScript代码

下一篇:JS script脚本中async和defer区别详解

本文标题:javascript中的onkeyup和onkeydown区别介绍

本文地址:http://www.codeinn.net/misctech/8331.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有