DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> Javascript 檢測鍵盤按鍵信息及鍵碼值對應介紹
Javascript 檢測鍵盤按鍵信息及鍵碼值對應介紹
編輯:關於JavaScript     
Javascript中有3個事件句柄在對應鍵盤的輸入狀態:keydown、keypress和keyup。
分別對應的意思是:按鍵被按下(按下按鍵但還沒有抬起)、點擊按鍵(按下並抬起按鍵)、按鍵抬起(按鍵抬起之後)
按鍵的分類
按鍵可以分為“實鍵”和“虛鍵”
實鍵可以理解為我們能夠看到並打印出來的按鍵,如字母“A”、數字“1”、字符“?”等等
虛鍵就是那些無法打印出來起到控制作用的按鍵,如“Ctrl”、“Alt”、“Shift”、“方向鍵”等等
IE在處理虛鍵時有個特例:虛鍵不會產生keypress事件,必須使用keydown或keyup來捕獲
按鍵碼和字符碼
按鍵碼是計算機用來識別不同按鍵的編碼,每一個按鍵都有按鍵碼
字符碼是可被打印的實鍵特有的,對應了鍵盤上顯示的字符
按鍵碼可以使用String.fromCharCode()轉換為字符碼
按鍵碼和和字符碼的對應表可以在本文最後找到。
獲取實鍵
復制代碼 代碼如下:
function getKeyCode(e) {
var keyCode = 0;
var e = e || window.event;
keyCode = e.keyCode || e.which || e.charCode;
alert(keyCode);
}

稍微解釋下
1. e為Firefox等標准浏覽器支持的JS隱藏變量,表示一個“事件”;IE系列中沒有“e”,而是用window.event來表示“事件”;所以var e = e || window.event;就表示:獲取當前正在發生的事件。
2. e.keyCode、e.which、e.charCode都代表獲取按鍵碼,但不同的浏覽器支持不同的寫法
獲取虛鍵
復制代碼 代碼如下:
function getKeyCode(e) {
var keyCode = 0;
var e = e || window.event;
if (e.ctrlKey) alert("ctrlKey pressed");
if (e.altKey) alert("altKey pressed");
if (e.shiftKey) alert("shiftKey pressed");
}

字母和數字鍵的鍵碼值(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 Dw 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

多媒體鍵碼值(keyCode) 按鍵 鍵碼 按鍵 鍵碼 按鍵 鍵碼 按鍵 鍵碼 音量加 175             音量減 174             停止 179             靜音 173             浏覽器 172             郵件 180             搜索 170             收藏 171            
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved