javascript中的onkeyup和onkeydown区别介绍_Javascript教程-查字典教程网
javascript中的onkeyup和onkeydown区别介绍
javascript中的onkeyup和onkeydown区别介绍
发布时间:2017-01-14 来源:查字典编辑
摘要:昨天在写上次那个动态生成年月日下拉框和文本框限制输入的时候遇到了一个问题,文本框里输入的时候要开始计算文本框里面输入了多少字,自然想到了on...

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