onkeyup和onkeydown事件的區別

admin發表於2017-02-19
事件

這兩個事件都是關於鍵盤按鍵的，從字面意思看，一個是當按鍵鬆開的時候被觸發，一個是當按鍵按下的時候觸發，當然這個是再簡單不過的了（與等於廢話）。不過有時候可能不注意兩個的一些細節可就可能導致一些錯誤，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>文字框輸入統計</title>
<style type="text/css">
span{
  color:red;
}
</style>
<script type="text/javascript">
var len;
function tongji(){
  num.innerHTML=this.innerHTML.length;
}
window.onload=function(){
  var mytest=document.getElementById("mytest");
  var num=document.getElementById("num");
  mytest.onkeydown=tongji;
}
</script>
</head>
<body>
<textarea id="mytest"></textarea>
當前字元長度:<span id="num">0</span>
</body>
</html>

以上程式碼是我們用onkeydown事件實現的文字框輸入字元長度統計效果。俺是在實際應用中卻存在這樣的問題，當輸入以內字元的時候第一個字元無法統計，輸入漢字的時候最開始一次性輸入的漢字無法統計。如果把修改成onkeyup事件就沒有任何問題了。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>文字框輸入統計</title>
<style type="text/css">
span{
  color:red;
}
</style>
<script type="text/javascript">
var len;
function tongji(){
  num.innerHTML=this.innerHTML.length;
}
window.onload=function(){
  var mytest=document.getElementById("mytest");
  var num=document.getElementById("num");
  mytest.onkeyup=tongji;
}
</script>
</head>
<body>
<textarea id="mytest"></textarea>
當前字元長度:<span id="num">0</span>
</body>
</html>

以上程式碼實現了正確的輸入統計。下面簡單介紹一下原因：

onkeydown是鍵盤按鍵按下時候觸發，但是這個時候，鍵值並沒有輸出，說以就無法統計到。

相關文章