鍵盤事件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 按鍵事件,鉤子可以獲取任何鍵盤事件