快捷導(dǎo)航

javascript中的onkeyup和onkeydown區(qū)別介紹

更新時(shí)間：2013年04月28日 17:17:32 作者：

文本框里輸入的時(shí)候要開(kāi)始計(jì)算文本框里面輸入了多少字，自然想到了onkeydown事件，然后計(jì)算value.length的方法，下面看下具體的代碼

昨天在寫上次那個(gè)動(dòng)態(tài)生成年月日下拉框和文本框限制輸入的時(shí)候遇到了一個(gè)問(wèn)題，文本框里輸入的時(shí)候要開(kāi)始計(jì)算文本框里面輸入了多少字，自然想到了onkeydown事件，然后計(jì)算value.length的方法，看代碼吧

復(fù)制代碼代碼如下:

 
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; 
} 
} 

結(jié)果發(fā)現(xiàn)文字輸入完之后字?jǐn)?shù)計(jì)算的不對(duì)，本來(lái)是4個(gè)字輸入完之后發(fā)現(xiàn)發(fā)現(xiàn)字?jǐn)?shù)還是顯示0

想了好久，最后當(dāng)吧onkeydown換成onkeyup之后，一切就好了

查了一下然來(lái)這兩個(gè)事件是有不同的
onkeydown是按下的時(shí)候觸發(fā)的，這個(gè)時(shí)候鍵值沒(méi)有輸出來(lái)。 onkeyup是按鍵抬起的時(shí)候執(zhí)行的，這個(gè)時(shí)候鍵值已經(jīng)有了。和按多長(zhǎng)時(shí)間沒(méi)關(guān)系，比如你給輸入框加這2個(gè)事件，

復(fù)制代碼代碼如下:

 
<input type="text" id="test1" onkeydown="alert(this.value);"/> 
<input type="text" id="test2" onkeyup="alert(this.value);"/> 

你看看這二個(gè)不同的運(yùn)行結(jié)果就明白了！

復(fù)制代碼代碼如下:

 
<!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是按下的時(shí)候觸發(fā)的，這個(gè)時(shí)候鍵值沒(méi)有輸出來(lái)。
onkeyup是按鍵抬起的時(shí)候執(zhí)行的，這個(gè)時(shí)候鍵值已經(jīng)有了。
和按多長(zhǎng)時(shí)間沒(méi)關(guān)系，比如你給輸入框加這2個(gè)事件，

您可能感興趣的文章: