javascript中的onkeyup和onkeydown區別介紹

2019-11-20 22:45:36

字體：大中小

來源：轉載

供稿：網友

昨天在寫上次那個動態生成年月日下拉框和文本框限制輸入的時候遇到了一個問題，文本框里輸入的時候要開始計算文本框里面輸入了多少字，自然想到了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個事件，

上一篇：Jquery post傳遞數組方法實現思路及代碼

下一篇：JQuery中如何傳遞參數如click(),change()等具體實現