JS鍵盤事件對(duì)象之keyCode、charCode、which屬性對(duì)比

先說一些有關(guān)鍵盤事件的事項(xiàng)：用js實(shí)現(xiàn)鍵盤記錄，要關(guān)注瀏覽器的三種按鍵事件類型，即keydown，keypress和keyup，它們分別對(duì)應(yīng)onkeydown、 onkeypress和onkeyup這三個(gè)事件句柄。一個(gè)典型的按鍵會(huì)產(chǎn)生所有這三種事件，依次是keydown，keypress，然后是按鍵釋放時(shí)候的keyup。

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

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

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

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

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

兩種代碼類型的區(qū)別是:

• 字符代碼 - 表示 ASCII 字符的數(shù)字

• 鍵盤代碼 - 表示鍵盤上真實(shí)鍵的數(shù)字

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

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

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

1、在不同瀏覽器下如何轉(zhuǎn)化為字符

　　(1)FireFox、Opera、Chrome

事件對(duì)應(yīng)的函數(shù)有一個(gè)隱藏的變量e，表示發(fā)生事件。

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

靜態(tài)函數(shù)String.fromCharCode()可以把索引值（按鍵碼）轉(zhuǎn)化成該鍵對(duì)應(yīng)的的字符。

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表示發(fā)生事件。

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

靜態(tài)函數(shù)String.fromCharCode()可以把索引值（按鍵碼）轉(zhuǎn)化成該鍵對(duì)應(yīng)的的字符。

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對(duì)象的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

　　由于當(dāng)前瀏覽器沒有相應(yīng)屬性的話會(huì)返回undefined，因此，利用||運(yùn)算符簡(jiǎn)化如下：

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屬性，F(xiàn)ireFox中有which和charCode屬性，Opera中有keyCode和which屬性，Chrome中有keyCode、which和charCode屬性。IE8 及其更早版本不支持 which 屬性。“DOM3級(jí)”提出的key屬性雖好，由于兼容性問題，所以不建議用！

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

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

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

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

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

4、keyDown和keyUp對(duì)于單個(gè)字符捕獲的keyValue都是一個(gè)值，也就是不區(qū)分單個(gè)字符的大小寫。

5、keyPress不區(qū)分小鍵盤和主鍵盤的數(shù)字字符。keyDown和keyUp區(qū)分小鍵盤和主鍵盤的數(shù)字字符。

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