首頁 > 開發者 > Go

轉：javascript 鍵盤事件總結

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

在form中， submit的快速鍵是 enter，reset的快速鍵是 esc。不過在IE6,safari4,ff3.5,opera10,chrome中，按Enter，不但激發form的submit事件，同時也會激發提交按鈕的onclick，激發順序為提交按鈕的 onclick →　form 的 onsubmit。

<html dir="ltr" lang="zh-CN"><br /> <head><br /> <meta charset="utf-8"/><br /> <meta http-equiv="X-UA-Compatible" content="IE=Edge"><br /> <title>鍵盤事件</title></p><p> </head><br /> <body><br /> <h3>鍵盤事件</h3></p><p> <form onsubmit="alert('Form is submiting');return false;"><br /> <p><input type="text" value="將焦點聚焦於文本域中，然後按斷行符號鍵或Esc鍵" /></p><br /> <p><input type="submit" onclick="alert('submit button is clicked');" value="submit"/><br /> <input type="reset" onclick="alert('reset button is clicked');" value="reset" /><br /> </p><br /> </form><br /> </body><br /></html><br />

運行代碼

不過並不止提交按鈕會激發form的submit事件，連同上面的歸納如下：

  1. 如果表單裡有一個type="submit"的按鈕，斷行符號鍵生效。
  2. 如果表單裡只有一個type="text"的input，不管按鈕是什麼type，斷行符號鍵生效。
  3. 如果按鈕不是用input，而是用button，並且沒有加type，IE下預設為type=button，FX預設為type=submit。
  4. 其他表單元素如textarea、select不影響，radio checkbox不影響觸發規則，但本身在FX下會響應斷行符號鍵，在IE下不響應。
  5. type="image"的input，效果等同於type="submit"。不知道為什麼會設計這樣一種type，不推薦使用，應該用CSS添加背景圖合適些。

除了在按鈕中綁定鍵盤事件外，瀏覽器還有一個accesskey 屬性來指定連結的快速鍵。注意 accesskey 的設定如果和瀏覽器的菜單相同，會優先於菜單。在IE中，快速鍵是 alt + 設定的索引值，FF是Alt+Shift+ 設定的索引值。 在IE 中，a元素的 accesskey 只是使焦點轉移到連結上，並不等同於點擊，FF 中則相當於點擊。與他對比的是，input type=checkbox 的 accesskey 效果不論在IE 還是 FF 中都是點擊。另外，我們還可以配合label標籤來加強語義，個人是十分推薦這種做法的。

剩下的就需要編程了。javascript事件主要通過以下三個事件來捕獲鍵盤事件：onkeydown,onkeypress與onkeyup。該三個事件的執行順序如下：onkeydown -> onkeypress ->onkeyup。在一般情況下，採用三種鍵盤事件均可對鍵盤輸入進行有效響應。當在實際使用中，會發現這幾者有些不同的差別。

onkeypress事件不能對系統功能鍵(例如：後退、刪除等，其中對中文IME不能有效響應)進行正常的響應，onkeydown和onkeyup均可以對系統功能鍵進行有效攔截，但事件截獲的位置不同，可以根據具體的情況選擇不同的鍵盤事件。

由於onkeypress不能對系統功能鍵進行捕獲，導致window.event對象的keyCode屬性和onkeydown，onkeyup鍵盤事件中擷取的keyCode屬性不同，主要表現在onkeypress事件的keyCode對字母的大小寫敏感，而onkeydown、onkeyup事件不敏感；onkeypress事件的keyCode無法區分主鍵盤上的數字鍵和副鍵盤數字鍵的，而onkeydown、onkeyup的keyCode對主副鍵盤的數字鍵敏感。

<!doctype html><br /><html dir="ltr" lang="zh-CN"><br /> <head><br /> <meta charset="utf-8"/><br /> <meta http-equiv="X-UA-Compatible" content="IE=Edge"><br /> <title>鍵盤事件</title><br /> <style type="text/css"><br /> td {<br /> text-align:center;<br /> }<br /> </style><br /> <script type="text/javascript"><br /> window.onload=function(){<br /> document.onkeydown = showKeyDown<br /> document.onkeyup = showKeyUp<br /> document.onkeypress = showKeyPress<br /> }<br /> function showKeyDown(evt) {<br /> evt = (evt) ? evt : window.event<br /> document.getElementById("pressKeyCode").innerHTML = 0<br /> document.getElementById("upKeyCode").innerHTML = 0<br /> document.getElementById("pressCharCode").innerHTML = 0<br /> document.getElementById("upCharCode").innerHTML = 0<br /> restoreModifiers("")<br /> restoreModifiers("Down")<br /> restoreModifiers("Up")<br /> document.getElementById("downKeyCode").innerHTML = evt.keyCode<br /> if (evt.charCode) {<br /> document.getElementById("downCharCode").innerHTML = evt.charCode<br /> }<br /> showModifiers("Down", evt)<br /> }<br /> function showKeyUp(evt) {<br /> evt = (evt) ? evt : window.event<br /> document.getElementById("upKeyCode").innerHTML = evt.keyCode<br /> if (evt.charCode) {<br /> document.getElementById("upCharCode").innerHTML = evt.charCode<br /> }<br /> showModifiers("Up", evt)<br /> return false<br /> }<br /> function showKeyPress(evt) {<br /> evt = (evt) ? evt : window.event<br /> document.getElementById("pressKeyCode").innerHTML = evt.keyCode<br /> if (evt.charCode) {<br /> document.getElementById("pressCharCode").innerHTML = evt.charCode<br /> }<br /> showModifiers("", evt)<br /> return false<br /> }<br /> function showModifiers(ext, evt) {<br /> restoreModifiers(ext)<br /> if (evt.shiftKey) {<br /> document.getElementById("shift" + ext).style.backgroundColor = "#ff0000"<br /> }<br /> if (evt.ctrlKey) {<br /> document.getElementById("ctrl" + ext).style.backgroundColor = "#00ff00"<br /> }<br /> if (evt.altKey) {<br /> document.getElementById("alt" + ext).style.backgroundColor = "#0000ff"<br /> }<br /> }<br /> function restoreModifiers(ext) {<br /> document.getElementById("shift" + ext).style.backgroundColor = "#ffffff"<br /> document.getElementById("ctrl" + ext).style.backgroundColor = "#ffffff"<br /> document.getElementById("alt" + ext).style.backgroundColor = "#ffffff"<br /> }<br /> </script><br /> </head><br /> <body><br /> <h3>鍵盤事件</h3><br /> <form><br /> <table border=1 cellpadding="2" cellspacing="0"><br /> <tr><br /> <th></th><br /> <th>onKeyDown</th><br /> <th>onKeyPress</th><br /> <th>onKeyUp</th><br /> </tr><br /> <tr><br /> <th>Key Codes</th><br /> <td id="downKeyCode">0</td><br /> <td id="pressKeyCode">0</td><br /> <td id="upKeyCode">0</td><br /> </tr><br /> <tr><br /> <th>Char Codes (IE5/Mac; NN6)</th><br /> <td id="downCharCode">0</td><br /> <td id="pressCharCode">0</td><br /> <td id="upCharCode">0</td><br /> </tr><br /> <tr><br /> <th rowspan="3">Modifier Keys</th><br /> <td><span id="shiftdown">Shift</span></td><br /> <td><span id="shift">Shift</span></td><br /> <td><span id="shiftUp">Shift</span></td><br /> </tr><br /> <tr><br /> <td><span id="ctrlDown">Ctrl</span></td><br /> <td><span id="ctrl">Ctrl</span></td><br /> <td><span id="ctrlUp">Ctrl</span></td><br /> </tr><br /> <tr><br /> <td><span id="altdown">Alt</span></td><br /> <td><span id="alt">Alt</span></td><br /> <td><span id="altUp">Alt</span></td><br /> </tr><br /> </table><br /> </form><br /> </body><br /></html><br />

運行代碼

我們可以利用以下指令碼來監聽網頁中的鍵盤事件，一旦使用者按下Enter鍵便開始你綁定的事件。

function getKey(e){    e = e || window.event;    var keycode = e.which ? e.which : e.keyCode;    if(keycode == 13 || keycode == 108){ //如果按下ENTER鍵       //在這裡設定你想綁定的事件    }}// 把keyup事件綁定到document中function listenKey (  ) {    if (document.addEventListener) {        document.addEventListener("keyup",getKey,false);    } else if (document.attachEvent) {        document.attachEvent("onkeyup",getKey);    } else {        document.onkeyup = getKey;    }}

最後附上，鍵盤中所有按鈕的keycode一覽

字母和數字鍵的鍵碼值(keyCode)
按鍵 鍵碼 按鍵 鍵碼 按鍵 鍵碼 按鍵 鍵碼
A 65 J 74 S 83 1 49
B 66 K 75 T 84 2 50
C 67 L 76 U 85 3 51
D 68 M 77 V 86 4 52
E 69 N 78 W 87 5 53
F 70 O 79 X 88 6 54
G 71 P 80 Y 89 7 55
H 72 Q 81 Z 90 8 56
I 73 R 82 0 48 9 57

 

數字鍵台上的鍵的鍵碼值(keyCode) 功能鍵鍵碼值(keyCode)
按鍵 鍵碼 按鍵 鍵碼 按鍵 鍵碼 按鍵 鍵碼
0 96 8 104 F1 112 F7 118
1 97 9 105 F2 113 F8 119
2 98 * 106 F3 114 F9 120
3 99 + 107 F4 115 F10 121
4 100 Enter 108 F5 116 F11 122
5 101 - 109 F6 117 F12 123
6 102 . 110        
7 103 / 111        

 

修飾鍵鍵碼值(keyCode)
按鍵 鍵碼 按鍵 鍵碼 按鍵 鍵碼 按鍵 鍵碼
BackSpace 8 Esc 27 Right Arrow 39 -_ 189
Tab 9 Spacebar 32 Down Arrow 40 .> 190
Clear 12 Page Up 33 Insert 45 /? 191
Enter 13 Page Down 34 Delete 46 `~ 192
Shift 16 End 35 Num Lock 144 [{ 219
Control 17 Home 36 ;: 186 \| 220
Alt 18 Left Arrow 37 =+ 187 ]} 221
Cape Lock 20 Up Arrow 38 ,< 188 '" 222

另外我們還可以用event.altKey，event.ctrlKey，event.metaKey(上有微軟的旗幟)，event.shiftKey來判斷對應的鍵是否被按下，因為它們都是返回一個布爾值。

一些有用的連結

keydown在opera裡與其他瀏覽器的區別

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
formatmoney javascript javascript getdatetime unlink javascript hmac javascript javascript echo javascript encode javascript encodeuri
相關文章
轉 sqlplus執行sql報錯：ORA-01756:
(轉)Navicat Premium 12.1.8.0安裝與啟用
轉:Windows下用sftp自動下載檔案
使用golang製作windows GUI圖形介面 — Walk
Go語言下載、安裝、配置、使用
golang 私密金鑰"加密"公開金鑰"解密"

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More