javascript中的onkeyup和onkeydown區(qū)別介紹
昨天在寫(xiě)上次那個(gè)動(dòng)態(tài)生成年月日下拉框和文本框限制輸入的時(shí)候遇到了一個(gè)問(wèn)題,文本框里輸入的時(shí)候要開(kāi)始計(jì)算文本框里面輸入了多少字,自然想到了onkeydown事件,然后計(jì)算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;
}
}
結(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è)事件,
<input type="text" id="test1" onkeydown="alert(this.value);"/>
<input type="text" id="test2" onkeyup="alert(this.value);"/>
你看看這二個(gè)不同的運(yùn)行結(jié)果就明白 了!
<!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è)事件,
相關(guān)文章
一起來(lái)學(xué)習(xí)一下JavaScript的事件流
這篇文章主要為大家詳細(xì)介紹了JavaScript的事件流,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助2022-01-01為JS擴(kuò)展Array.prototype.indexOf引發(fā)的問(wèn)題及解決辦法
這篇文章主要介紹了為JS擴(kuò)展Array.prototype.indexOf引發(fā)的問(wèn)題及解決辦法,需要的朋友可以參考下2015-01-01Javascript中的數(shù)學(xué)函數(shù)集合
Javascript中的數(shù)學(xué)函數(shù)集合...2007-05-05Javascript selection的兼容性寫(xiě)法介紹
本文為大家講解下Javascript selection的兼容性寫(xiě)法,感興趣的朋友可以參考下2013-12-12JavaScript中g(shù)etUTCMinutes()方法的使用詳解
這篇文章主要介紹了JavaScript中g(shù)etUTCMinutes()方法的使用詳解,是JS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06