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

2019-11-20 22:45:36

字體：大中小

供稿：網(wǎng)友

昨天在寫上次那個(gè)動(dòng)態(tài)生成年月日下拉框和文本框限制輸入的時(shí)候遇到了一個(gè)問題，文本框里輸入的時(shí)候要開始計(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ì)算的不對，本來是4個(gè)字輸入完之后發(fā)現(xiàn)發(fā)現(xiàn)字?jǐn)?shù)還是顯示0

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

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

上一篇：Jquery post傳遞數(shù)組方法實(shí)現(xiàn)思路及代碼

下一篇：JQuery中如何傳遞參數(shù)如click(),change()等具體實(shí)現(xiàn)