1. 程式人生 > >鍵盤事件keypress 和 keydown、keyup 的用法與區別

鍵盤事件keypress 和 keydown、keyup 的用法與區別

  • KeyDown:使用者摁下摁鍵時發生
  • KeyPress:使用者摁下摁鍵,並且產生一個字元時發生
  • KeyUp: 使用者釋放某一個摁鍵時觸發

定義和用法

完整的 keypress 過程分為兩個部分: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>

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>

這裡分別用 keydown 、keyup、keypress做了實驗,其中只有 keyup可以完整的將輸入內容同步獲取到,keydown和keypress總是無法獲取到最後一個字元,這說明了三者之間的區別:
keydown 總是在摁鍵摁下的當時觸發,不能得到最後的輸入結果,keypress也是一樣

這是因為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>  

windows 窗體通過引發鍵盤事件來處理鍵盤入以響應 windows 訊息,大多數 windows 窗體應用程式都通過處理鍵盤事件以獨佔方式處理鍵盤輸入。

按鍵的型別

windows 窗體將鍵盤輸入標識為:由按位 keys 列舉表示的虛擬鍵程式碼。

使用 keys 列舉,可以綜合一系列按鍵以生成單個值,這些值與 WM_KEYDOWN 和 WM_SYSKEYDOWNWindows 訊息所伴隨的值相對應。通過處理 keydown 或 keyup 事件可以檢測大多數的惡物理按鍵操作。字元鍵是 keys 列舉的子集,它們與 WM_KEYDOWN 和 WM_SYSKEYDOWNWindows 訊息所伴隨的值相對應,如果通過組合按鍵得到一個字元,則可以處理 keypress 事件來檢測該字元。

鍵盤事件的順序

  • 使用者按 “a”鍵:則該鍵將被預處理和排程,而且會發生 keydown 事件
  • 使用者按住 “a”鍵:則該鍵將被預處理和排程,而且會發生 keypress 事件
  • 使用者鬆開 “a”鍵:則該鍵將被預處理和排程,而且會發生 keyup事件

3.鍵的預處理

像其他訊息一樣,鍵盤訊息是在窗體或控制元件的 WindProc 方法中處理的,窗體或控制元件在處理鍵盤訊息之前 PreProcessMessage 方法會呼叫一個或多個方法,這些方法可以被重寫以處理特殊的字元鍵和物理按鍵。

keydown 觸發後不一定觸發 keyup 當 keydown按下後拖動滑鼠,那麼將不會觸發 keyup事件

  • 4 用法區別:

    • 系統由 keydown 返回鍵盤的程式碼 後再由 translateMessage 函式翻譯成字元,然後在由 keypress 返回鍵盤的字元值(Ascall 字元)。

      所以,在使用時應根據你的目的,選擇性的使用:

      如果你只想讀取字元用 keypress;如果想讀取各鍵盤的狀態用 keydown

      • keydown: 使用者再鍵盤上按下某按鍵時觸發,一直按著某按鍵則會不斷觸發(opera瀏覽器除外);
      • keypress:使用者按下一個按鍵,併產生一個字元時觸發(也就是不管類似 shift、alt、ctrl之類的鍵只要使用者按了一個能在螢幕上輸出字元的按鍵 keypress 事件才會觸發)一直按著某鍵則會不斷觸發

      • keypress主要用來捕獲數字(注意:包括 shift+數字符號)、字母(注意:包括大小寫)、小鍵盤除了F1-12、shift、Alt、Ctrl、insert、home、pgup、delete、end、pgdn、scrolllock、pause、numlock、選單鍵、開始鍵、和方向鍵外的ANSI字元

      • keydown和keyup通常可以捕獲除了 prscrn 所有鍵(這裡不討論特殊鍵盤的特殊鍵)

      • keydown和keyup對於單個字元捕獲的 keyvalue 都是一個值,也就是不能判斷單個字元的大小寫

      • keypress 不區分小鍵盤和主鍵盤的數字字元

      • keydown 和 keyup 區分小鍵盤和主鍵盤的數字字元

      • 其中 prscrn按鍵和 keypress 、keydown 和 keyup 都不能捕獲

  • 5.系統組合鍵的判定

    在使用鍵盤的時候通常會用到 Ctrl+shift+alt 類似的組合鍵功能,通過 keyup 事件能夠處理(說明一下這裡不用keydown事件:因為在判定keydown 的時候,ctrl、shift、和Alt屬於一直按下狀態然後再加另外一個鍵是不能準確捕獲組合鍵,所以使用keydown 是不能準確判斷的,要通過keyup事件來判定)

  • 6.捕獲PreScrn按鍵事件

    通過一種鉤子的方式可以判定PrScrn 按鍵事件,鉤子可以獲取任何鍵盤事件