JS鍵盤事件對象之keyCode、charCode、which屬性對比

先說一些有關鍵盤事件的事項：用js實現鍵盤記錄，要關注瀏覽器的三種按鍵事件類型，即keydown，keypress和keyup，它們分別對應onkeydown、 onkeypress和onkeyup這三個事件句柄。一個典型的按鍵會產生所有這三種事件，依次是keydown，keypress，然后是按鍵釋放時候的keyup。

　　在這3種事件類型中，keydown和keyup比較底層，而keypress比較高級。這里所謂的高級是指，當用戶按下shift + 1時，keypress是對這個按鍵事件進行解析后返回一個可打印的“!”字符，而keydown和keyup只是記錄了shift + 1這個事件。[1]

　　但是keypress只能針對一些可以打印出來的字符有效，而對于功能按鍵，如F1-F12、Backspace、Enter、Escape、 PageUP、PageDown和箭頭方向等，就不會產生keypress事件，但是可以產生keydown和keyup事件。然而在FireFox中，功能按鍵是可以產生keypress事件的。

　　傳遞給keydown、keypress和keyup事件句柄的事件對象有一些通用的屬性。如果Alt、Ctrl或Shift和一個按鍵一起按下，這通過事件的altKey、ctrlKey和shiftKey屬性表示，這些屬性在FireFox和IE中是通用的，返回值為布爾值。還有一個metaKey屬性，但IE表示不支持。

　　既然是比較三者的異同，第一件事肯定就是去了解它們的定義：

keyCode 屬性返回onpress事件觸發的鍵的值的字符代碼，或者 onkeydown 或  onkeyup 事件的鍵的代碼。

兩種代碼類型的區別是:

• 字符代碼 - 表示 ASCII 字符的數字

• 鍵盤代碼 - 表示鍵盤上真實鍵的數字

charCode 屬性返回onpress事件觸發鍵值的字母代碼，僅用于字符代碼。

which屬性和keyCode類似，但是不兼容IE8以下的瀏覽器。

　　下面再來說說讓人頭疼的瀏覽器問題：兼容性！

1、在不同瀏覽器下如何轉化為字符

　　(1)FireFox、Opera、Chrome

事件對應的函數有一個隱藏的變量e，表示發生事件。

e有一個屬性e.which指示哪個鍵被按下，給出該鍵的索引值（按鍵碼）。

靜態函數String.fromCharCode()可以把索引值（按鍵碼）轉化成該鍵對應的的字符。

eg：

1 <input type="text" id="text">  
2 <script>  
3     document.getElementById("text").onkeypress = function(e) {  
4         alert("按鍵碼: " + e.which + " 字符: " + String.fromCharCode(e.which));      
5     };  
6 </script>

FireFox、Opera、Chrome輸入“a”；

輸出： “按鍵碼：97 字符：a”

　　(2) IE

IE不需要e變量，window.event表示發生事件。

window.event有一個屬性window.event.keyCode指示哪個鍵被按下，給出該鍵的索引值（按鍵碼）。

靜態函數String.fromCharCode()可以把索引值（按鍵碼）轉化成該鍵對應的的字符。

eg：

1 <input type="text" id="text">  
2 <script>  
3     document.getElementById("text").onkeypress = function() {  
4         alert("按鍵碼: " + window.event.keyCode + " 字符: " + String.fromCharCode(window.event.keyCode));      
5     };  
6 </script>

IE中輸入：a

輸出：按鍵碼：97 字符：a

2、如何判斷瀏覽器類型

利用navigator對象的appName屬性。

IE：navigator.appName=="Microsoft Internet Explorer"

FireFox、Opera、Chrome：navigator.appName=="Netscape"

eg：

 <input type="text" id="text">   <script>       document.getElementById("text"). =           (navigator.appName == "Microsoft Internet Explorer"             alert("按鍵碼: " + window.event.keyCode + " 字符: " +         }  (navigator.appName == "Netscape"             alert("按鍵碼: " + e.which + " 字符: " +  </script>

IE、FireFox、Opera、Chrome中輸入：a

輸出：按鍵碼：97 字符：a

　　由于當前瀏覽器沒有相應屬性的話會返回undefined，因此，利用||運算符簡化如下：

1 <input type="text" id="text">  
2 <script>  
3     document.getElementById("text").onkeypress = function(e) {  
4         e = e || window.event;  
5         key = e.keyCode || e.which || e.charCode;  
6         alert("按鍵碼: " + key + " 字符: " + String.fromCharCode(key));       
7     };  
8 </script>

　　注意：IE只有keyCode屬性，FireFox中有which和charCode屬性，Opera中有keyCode和which屬性，Chrome中有keyCode、which和charCode屬性。IE8 及其更早版本不支持 which 屬性。“DOM3級”提出的key屬性雖好，由于兼容性問題，所以不建議用！

　　總結：在keydown事件里面，事件包括了keyCode - 用戶按下的鍵的物理編碼。在keypress里，keyCode包含了字符編碼，即表示字符的ASCII編碼。這樣的形式適用于所以瀏覽器，除了火狐，它在keypress事件中的keyCode返回值為0；如果你想獲取用戶實際敲擊的按鈕，用keydown事件來獲取事件對象，并獲取keycode值，這在所有瀏覽器都行的通。另一方面，如果你想獲取用戶輸入的字符，那么就使用keypress來獲取，然后獲取charCode【火狐或Safari】或keyCode【其他瀏覽器】。

　　附：keyPress和keyDown、keyUp之間的差別：

1、keyPress首要用來捕獲可打印的字符。比如數字（重視：包含Shift+數字的符號）、字母（重視：包含大小寫）、小鍵盤等除了F1-F12、SHIFT、Alt、Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock...

2、keyPress只能捕獲單個字符，keyDown和keyUp可以捕獲組合鍵。

3、keyPress可以捕獲單個字符的大小寫。

4、keyDown和keyUp對于單個字符捕獲的keyValue都是一個值，也就是不區分單個字符的大小寫。

5、keyPress不區分小鍵盤和主鍵盤的數字字符。keyDown和keyUp區分小鍵盤和主鍵盤的數字字符。

6、此中PrScrn按鍵keyPress、keyDown和keyUp都不能捕獲。