鍵值 keyCode事件屬性

keyCode屬性傳回onkeypress事件觸發的鍵值的字元代碼，或onkeydown/onkeyup的鍵的代碼。

兩種代碼類型的差別是：

字元代碼 - 表示 ASCII 字元的數字

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

HTML:

<code>&lt;</code><code>input</code> <code>type</code><code>=</code><code>"text"</code> <code>id</code><code>=</code><code>"test"</code> <code>onkeydown</code><code>=</code><code>"testKeyCode();"</code><code>&gt;</code>

JS:

<code>//按下Enter鍵處理程式</code>

<code>function</code> <code>testKeyCode(){</code>

<code>    </code><code>var</code> <code>e = e||window.event; </code><code>//相容IE浏覽器，IE8将事件對象儲存為一個全局變量event</code>

<code>    </code><code>console.log(e);</code>

<code>}</code>

把事件源對象列印出來，看看有哪些常見的屬性

<a href="http://s1.51cto.com/wyfs02/M02/88/8A/wKiom1f7LSTiUXdTAADhAREPIyc765.png" target="_blank"></a>

現在想要知道按鍵對應的鍵值，我們可以這麼做

JS：

<code>    </code><code>var</code> <code>e = e||window.event;</code>

<code>    </code><code>var</code> <code>x = e.keyCode; </code><code>//擷取Unicode值,例如enter的keycode是13，A的keycode是65</code>

<code>    </code><code>console.log(x);</code>

<code>    </code><code>var</code> <code>y = String.fromCharCode(x);  </code><code>//将鍵值轉換為字元</code>

<code>    </code><code>console.log(y);</code>

<code>    </code><code>var</code> <code>z = e.key;  </code><code>//key 事件在按下按鍵時傳回按鍵的辨別符</code>

<code>    </code><code>console.log(z);</code>

在頁面輸入框中分别輸入a,Enter鍵，大寫字母鍵，右箭頭鍵，檢視控制台

<a href="http://s1.51cto.com/wyfs02/M00/88/87/wKioL1f7L1aBKwHqAACyb85b0oo888.png" target="_blank"></a>

附上Keycode完整的值清單

<a href="http://s5.51cto.com/wyfs02/M02/88/8B/wKiom1f7MTPT_bamAADs-Mp2AAQ806.png" target="_blank"></a>

本文轉自   frwupeng517   51CTO部落格，原文連結:http://blog.51cto.com/dapengtalk/1860203