前幾天，在寫完一個功能模塊上線測試的時候，出現了一個詭異的問題。input 框在輸入查詢內容之后，按回車鍵居然有兩種不同的表現形式（input 框沒有綁定鍵盤事件），谷歌和火狐功能正常，但IE在按了回車鍵以后居然自動調用方法。
頁面結構：標簽上沒綁定任何鍵盤事件，控制器內也沒有給元素綁定鍵盤事件。
<div class="search-input-tel search-input-visit-tel" > <input class="searchinput-tel searchinput-visit-tel" type="text" ng-model="private.keyWords" maxlength="20" placeholder="請輸入查詢信息!"/> </div>
表現形式：
，谷歌和火狐很正常，什么事都沒發生
，IE上卻自動調用了一個方法，而且始終調用的同一個方法。
搞得有點蒙圈，不曉得是咋回事。既然 input框 要調用鍵盤事件，那就調用吧，大不了我在標簽上面綁定定義好的鍵盤事件方法：
<div class="search-input-tel search-input-visit-tel" > <input class="searchinput-tel searchinput-visit-tel" type="text" ng-model="private.keyWords" maxlength="20" placeholder="請輸入查詢信息!" ng-keypress="enterQuery($event,'query',1)" ng-change="changesData(private.keyWords)"/> </div>
鍵盤回車事件方法：
//回車鍵功能 $scope.enterQuery = function (event,type,repetitionType) { var key = window.event ? window.event.keyCode : event.which; //獲取鍵盤碼；window.event.keyCode 獲取IE下的鍵盤碼，event.which獲取非IE下的鍵盤碼 if (key === 13) { //回車鍵鍵盤碼為13 try { if (window.event) { //ie $scope.clientsHeavy(type,repetitionType); window.event.returnValue = false; } else { //非IE $scope.clientsHeavy(type,repetitionType); return false; } } catch (ex) { } } };
這下解決了 input框 回車自動調用方法的問題。
現在返回來看他們之間的區別，在此我用了 keypress 事件，而沒有用 keyup 事件，因為keyup事件在IE上和谷歌上表現形式又不一樣。同樣是執行 console.log("鍵盤碼:key="+ key);
谷歌瀏覽器：keypress 事件和 keydown 事件，以及 keyup 事件，三者執行結果一樣，控制台都會打印： 鍵盤碼:key=13
IE瀏覽器：keypress 事件和 keydown事件，控制台也都會打印：鍵盤碼:key=13 ；但是到了 keyup事件，控制台則不打印：鍵盤碼:key=13，這表示keyup事件並沒有執行我們自定義的方法，反而又出現了自動調用方法的情況。所以自己在這總結下，他們仨之間的區別，加深印象。
/****下面抄一段對鍵盤事件和鍵盤碼 (ASCII碼)，以及KeyPress 和KeyDown 、KeUp事件的描述****/
Windows窗體通過引發鍵盤事件來處理鍵盤輸入以響應Windows消息，大多數Windows窗體應用程序都通過處理鍵盤事件來以獨占方式處理鍵盤輸入。
1．按鍵的類型
Windows窗體將鍵盤輸入標識為 由按位Keys枚舉 表示的虛擬鍵代碼。使用Keys枚舉，可以綜合一系列按鍵以生成單個值，這些值與WM_KEYDOWN和WM_SYSKEYDOWNWindows消息所伴隨的值相對應。另外，程序開發人員可通過處理KeyDown或KeyUp 事件來檢測大多數物理按鍵操作。字符鍵是Keys枚舉的子集，它們與WM_CHAR和WM_SYSCHAR Windows消息所伴隨的值相對應，如果通過組合按鍵得到一個字符，則可以通過處理KeyPress事件來檢測該字符。
事件定義：
- KeyDown：在控件有焦點的情況下按下鍵時發生。
- KeyPress：在控件有焦點的情況下按下鍵時發生。(下面會說和KeyDown 的區別)
- KeyUp：在控件有焦點的情況下釋放鍵時發生。
2．鍵盤事件的順序
一個控件上可能出現3個與鍵盤相關的事件，下面是這些事件發生的常規順序：
- 用戶按“a”鍵，該鍵將被預處理和調度，同時會觸發KeyDown事件。
- 用戶按住“a”鍵，該鍵將被預處理和調度，同時會觸發KeyPress事件。
- 用戶松開“a”鍵，該鍵將被預處理和調度，同時會觸發KeyUp事件。
但是KeyDown觸發后，不一定觸發KeyUp，當KeyDown 按下后，拖動鼠標，則不會觸發KeyUp事件。
3．鍵的預處理
像其他消息一樣，鍵盤消息是在窗體或控件的WndProc方法中處理的。窗體或控件在處理鍵盤消息之前，PreProcessMessage方法會調用一個或多個方法，這些方法可被重寫以處理特殊的字符鍵和物理按鍵。
4. 系統組合鍵的判定
在使用鍵盤的時候，通常會使用到CTRL+SHIFT+ALT 類似的組合鍵功能。對於此，如何進行判定？
通過KeyUp 事件能夠來處理（這里說明一下為什么不用KeyDown，因為在判定KeyDown的時候，CTRL、SHIFT和ALT 屬於一直按下狀態，然后再加另外一個鍵是不能准確捕獲組合鍵，所以使用 KeyDown 是不能准確判斷出的，要通過KeyUp 事件來判定）。
5. 捕獲PrScrn按鍵事件
通過一種鈎子的方式可以判定PrScrn 按鍵事件，鈎子可以獲取任何鍵盤事件。
6．KeyPress 和KeyDown 、KeyUp之間的區別
- KeyPress主要用來捕獲數字(注意：包括Shift+數字的符號)、字母（注意：包括大小寫）、小鍵盤等除了F1-12、SHIFT、Alt、Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock、{菜單鍵}、{開始鍵}和方向鍵外的ANSI字符
- KeyDown 和KeyUp 通常可以捕獲鍵盤除了PrScrn所有按鍵(這里不討論特殊鍵盤的特殊鍵）
- KeyPress 只能捕獲單個字符
- KeyDown 和KeyUp 可以捕獲組合鍵。
- KeyPress 可以捕獲單個字符的大小寫
- KeyDown和KeyUp 對於單個字符捕獲的KeyValue 都是一個值，也就是不能判斷單個字符的大小寫。
- KeyPress 不區分小鍵盤和主鍵盤的數字字符。
- KeyDown 和KeyUp 區分小鍵盤和主鍵盤的數字字符。
- 其中PrScrn 按鍵KeyPress、KeyDown和KeyUp 都不能捕獲。
/*********************************************************************************************************************************************************************************************************************************************************************************/
抄抄了那么多，感覺有點過於理論化，其實我們在按下一個鍵時，KeyDown和KeyPress兩個都要發生(一個在前，一個在后)，雖然兩個看上去沒什么區別，但是兩者還是有本質的區別。而 keyup 則是我們將按鍵抬起時觸發的，屬於整個按鍵過程的最后階段，所以有其特定的用處，最典型的就是左右數據預覽，以及獲取最后一個點擊字符。
下面是測試代碼和注釋：(結果就只能自己打開去看了)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>keydown、keypress、keyup的區別</title>
<style>
.area{
float: left;
display: inline;
width: 50%
}
</style>
</head>
<body>
<div>
<!--keydown、keypress、keyup觸發的先后順序-->
<span>隨意輸入一些字符:</span> <input class="keydown-keyup" style="background-color:#00FFFF" type="text"/>
<p>當 keydown、keypress 和 keyup 事件相繼觸發時，輸入區域會改變顏色。從而可以看出三個事件觸發的先后順序</p>
<p>在 keypress 一直按着不放開，keyup事件不會觸發，但該按鍵狀態碼會一直被獲取，文本框數據會一直添加</p>
</div>
<div style="margin-top: 100px">
<div style="width: 100%">
<textarea id="t1" class="area"></textarea>
<div id="v1" class="area"></div>
</div>
<!--按鍵按下觸發keydown事件，t1顯示當前按鍵字符，v1始終能獲取到新輸入的字符數據。按鍵不放開當前字符會一直往后添加，同樣v1的數據也會一直往后添加-->
<div style="width: 100%">
<textarea id="t2" class="area"></textarea>
<div id="v2" class="area"></div>
</div>
<!--按鍵按下觸發keypress事件，t2顯示當前按鍵字符，v2始終能獲取到新輸入的字符數據。按鍵不放開當前字符會一直往后添加，同樣v2的數據也會一直往后添加-->
<div style="width: 100%">
<textarea id="t3" class="area"></textarea>
<div id="v3" class="area"></div>
</div>
<!--按鍵按下觸發keyup事件，t2顯示當前按鍵字符，按鍵不放開則當前字符會一直往后添加，但v2並不能獲取到新輸入的字符數據-->
<div style="clear: both"></div>
<!--這里分別給三個textarea標簽綁定三種事件，其中t1，t2均不能實時將數據同步到v1，v2中(總是缺少當前正在輸入的字符)，keydown、keypress因為是按下按鍵就觸發，所以按下按鍵時當前輸入字符並未返回，因而不能實時同步。
而keyup則不一樣，keyup必須等到按鍵松開才能觸發，才能將數據同步，當然如果我一直按着按鍵(一直處於keydown、keypress階段)，雖然textarea數據一直在往后添加，但是下面div的數據卻無法同步，必須要按鍵松開才能同步。
這樣就說明了這三種事件觸發之間的區別，keydown是在按下時觸發，雖然返回鍵盤的代碼，但還沒得到最后的輸入結果；keypress也是一樣，雖然得到了ASCII字符，但還沒得到需要的字符；keyup才能得到最后的完整數據。
因而keyup適用於文本框的數據輸入和同步，keydown 與 keypress更適用於通過鍵盤控制頁面功能的實現(如回車事件)。所以可以根據不同的需求，適當的選擇!-->
</div>
<div style="margin-top: 100px">
<!--在看了三者之間的細小差別后，再來看下keydown、keypress之間的區別-->
<div>
<span>隨意輸入一些字符:</span><input class="keydown" type="text"/>
<p>這里顯示keydown事件返回的數據:</p><span id="keydown"></span>
</div>
<div>
<span>隨意輸入一些字符:</span><input class="keypress" type="text"/>
<p>這里顯示keypress事件返回的數據:</p><span id="keypress"></span>
</div>
</div>
<script type="text/javascript" src="./framework/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".keydown-keyup").keydown(function () {
console.log("keydown正在執行!");
$(".keydown-keyup").css("background-color", "#FF0000");
});
$(".keydown-keyup").keypress(function () {
console.log("keypress正在執行!");
$(".keydown-keyup").css("background-color", "#FFA500");
});
$(".keydown-keyup").keyup(function () {
console.log("keyup正在執行!");
$(".keydown-keyup").css("background-color", "#4B0082");
});
$('#t1').on('keydown', function () {
$('#v1').text($(this).val());
});
$('#t2').on('keypress', function () {
$('#v2').text($(this).val());
});
$('#t3').on('keyup', function () {
$('#v3').text($(this).val());
});
$(".keydown").keydown(function (event) {
console.log(event);
var key = window.event ? window.event.keyCode : event.which;
if (window.event) { //ie
$("#keydown").html("Key: " + key);
window.event.returnValue = false;
} else { //非IE
$("#keydown").html("Key: " + key);
return false;
}
});
$(".keypress").keypress(function (event) {
console.log(event);
var key = window.event ? window.event.keyCode : event.which;
if (window.event) { //ie
$("#keypress").html("Key: " + key);
window.event.returnValue = false;
} else { //非IE
$("#keypress").html("Key: " + key);
return false;
}
});
/**通過對event事件對象的對比，發現keydown和keypress兩個事件返回的事件對象基本相同，但有一個很細微的卻很重要的區別：charCode值不一樣
* keydown 事件對象的charCode值始終為：0
* keypress 事件對象的charCode值卻跟keyCode值一樣(當前按鍵字符的ASCII字符)。
* 所以：charCode 返回的是 onkeypress 事件觸發鍵值的字符代碼(ASCII字符代碼，就是ASCII碼，一一對應)。而 keyCode 返回的是 onkeydown onkeypress 以及 onkeyup 事件的鍵的代碼(還是ASCII碼)。
* 整個系統都是采用ASCII碼表(ASCII字符和ASCII碼一一對應，比如鍵盤"p"鍵，對應ASCII字符碼:"p"，對應ASCII碼:112) */
});
</script>
</body>
</html>
兜了一個大圈，終於對這三者之間的區別有了一定的了解。
總結：keyup適用於文本框的數據輸入和同步，以及數據的獲取；keydown 與 keypress更適用於通過鍵盤控制頁面功能的實現(如回車事件)。