KeyPress 和KeyDown 、KeyPress之間的區別
阿新 • • 發佈：2018-12-29
雖然從字面理解, KeyDown是按下一個鍵的意思, 但實際上二者的根本區別是, 系統由KeyDown返回鍵盤的程式碼, 然後由TranslateMessage函式翻譯成成字元, 由KeyPress返回字元值. 因此在KeyDown中返回的是鍵盤的程式碼, 而KeyPress返回的是ASCII字元. 所以根據你的目的, 如果只想讀取字元, 用KeyPress, 如果想讀各鍵的狀態, 用KeyDown.
keydown：使用者在鍵盤上按下某按鍵是發生。一直按著某按鍵則會不斷觸發（opera瀏覽器除外）。
keypress：使用者按下一個按鍵，併產生一個字元時發生（也就是不管類似shift、alt、ctrl之類的鍵，就是說使用者按了一個能在螢幕上輸出字元的按鍵keypress事件才會觸發）。一直按著某按鍵則會不斷觸發。
keyup：使用者釋放某一個按鍵是觸發。
定義和用法
完整的 key press 過程分為兩個部分：1. 按鍵被按下；2. 按鍵被鬆開。
當按鈕被按下時，發生 keydown 事件。
keydown() 方法觸發 keydown 事件，或規定當發生 keydown 事件時執行的函式。
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("input").keydown(function(){ $("input").css("background-color","#FFFFCC"); }); $("input").keyup(function(){ $("input").css("background-color","#D6D6FF"); }); }); </script> </head> <body> Enter your name: <input type="text" /> <p>當發生 keydown 和 keyup 事件時，輸入域會改變顏色。請試著在其中輸入內容。</p> </body> </html>
中所周知，jquery封裝了很多事件互動方法，這裡講到的問題在原生js中也是有的。
keyup是在使用者將按鍵擡起的時候才會觸發的，屬於整個按鍵過程中的最後階段，所以有其特定的用處，就是在左側輸入，右側同步顯示的過程中很有用處。典型的例子就是郵件編輯預覽的應用。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>無標題頁</title>
<script src="JS/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#t1').live('keyup', function() {
$('#v1').text($(this).val());
});
$('#t2').live('keydown', function() {
$('#v2').text($(this).val());
});
$('#t3').live('keypress', function() {
$('#v3').text($(this).val());
});
});
</script>
</head>
<body>
<textarea id="t1"></textarea>
<div id="v1">
</div>
<textarea id="t2"></textarea>
<div id="v2">
</div>
<textarea id="t3"></textarea>
<div id="v3">
</div>
</body>
</html>
這裡分別應用了三種事件，其中t1能夠完整的同步到v1中，而keypress和keydown總是少最後一個字元，這樣就說明了這三種事件觸發的小小區別，keydown是在按下時觸發，不能得到最後的輸入結果，keypress也是一樣。
例如：keydown繫結文字框，每次點選觸發事件，在獲取文字框的值，總是列印上次操作時文字框的內容，
這是因為keydown操作後，事件觸發了，但值還未顯示在文字框中，所以這類操作要用keyup 一個完整的按鍵動作後，才可以獲取文字框的值。
keydown與keypress更適用於通過鍵盤控制頁面類功能的實現。
獲取鍵盤點選的鍵位：
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("input").keydown(function(event){ $("div").html("Key: " + event.which); }); }); </script> </head> <body> 請隨意鍵入一些字元：<input type="text" /> <p>當您在上面的框中鍵入文字時，下面的 div 會顯示鍵位序號。</p> <div /> </body> </html>