這篇文章主要是對JQuery中keyUp與keyDown的區別進行了詳細的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助
定義和用法 完整的 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>