Javascript 檢測鍵盤按鍵信息及鍵碼值對應(yīng)介紹
更新時間:2013年01月03日 16:18:59 作者:
Javascript中有3個事件句柄在對應(yīng)鍵盤的輸入狀態(tài):按鍵被按下(按下按鍵但還沒有抬起)、點擊按鍵(按下并抬起按鍵)、按鍵抬起(按鍵抬起之后),接下來詳細(xì)介紹,感興趣的朋友可以了解下
Javascript中有3個事件句柄在對應(yīng)鍵盤的輸入狀態(tài):keydown、keypress和keyup。
分別對應(yīng)的意思是:按鍵被按下(按下按鍵但還沒有抬起)、點擊按鍵(按下并抬起按鍵)、按鍵抬起(按鍵抬起之后)
按鍵的分類
按鍵可以分為“實鍵”和“虛鍵”
實鍵可以理解為我們能夠看到并打印出來的按鍵,如字母“A”、數(shù)字“1”、字符“?”等等
虛鍵就是那些無法打印出來起到控制作用的按鍵,如“Ctrl”、“Alt”、“Shift”、“方向鍵”等等
IE在處理虛鍵時有個特例:虛鍵不會產(chǎn)生keypress事件,必須使用keydown或keyup來捕獲
按鍵碼和字符碼
按鍵碼是計算機(jī)用來識別不同按鍵的編碼,每一個按鍵都有按鍵碼
字符碼是可被打印的實鍵特有的,對應(yīng)了鍵盤上顯示的字符
按鍵碼可以使用String.fromCharCode()轉(zhuǎn)換為字符碼
按鍵碼和和字符碼的對應(yīng)表可以在本文最后找到。
獲取實鍵
function getKeyCode(e) {
var keyCode = 0;
var e = e || window.event;
keyCode = e.keyCode || e.which || e.charCode;
alert(keyCode);
}
稍微解釋下
1. e為Firefox等標(biāo)準(zhǔn)瀏覽器支持的JS隱藏變量,表示一個“事件”;IE系列中沒有“e”,而是用window.event來表示“事件”;所以var e = e || window.event;就表示:獲取當(dāng)前正在發(fā)生的事件。
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");
}
分別對應(yīng)的意思是:按鍵被按下(按下按鍵但還沒有抬起)、點擊按鍵(按下并抬起按鍵)、按鍵抬起(按鍵抬起之后)
按鍵的分類
按鍵可以分為“實鍵”和“虛鍵”
實鍵可以理解為我們能夠看到并打印出來的按鍵,如字母“A”、數(shù)字“1”、字符“?”等等
虛鍵就是那些無法打印出來起到控制作用的按鍵,如“Ctrl”、“Alt”、“Shift”、“方向鍵”等等
IE在處理虛鍵時有個特例:虛鍵不會產(chǎn)生keypress事件,必須使用keydown或keyup來捕獲
按鍵碼和字符碼
按鍵碼是計算機(jī)用來識別不同按鍵的編碼,每一個按鍵都有按鍵碼
字符碼是可被打印的實鍵特有的,對應(yīng)了鍵盤上顯示的字符
按鍵碼可以使用String.fromCharCode()轉(zhuǎn)換為字符碼
按鍵碼和和字符碼的對應(yīng)表可以在本文最后找到。
獲取實鍵
復(fù)制代碼 代碼如下:
function getKeyCode(e) {
var keyCode = 0;
var e = e || window.event;
keyCode = e.keyCode || e.which || e.charCode;
alert(keyCode);
}
稍微解釋下
1. e為Firefox等標(biāo)準(zhǔn)瀏覽器支持的JS隱藏變量,表示一個“事件”;IE系列中沒有“e”,而是用window.event來表示“事件”;所以var e = e || window.event;就表示:獲取當(dāng)前正在發(fā)生的事件。
2. e.keyCode、e.which、e.charCode都代表獲取按鍵碼,但不同的瀏覽器支持不同的寫法
獲取虛鍵
復(fù)制代碼 代碼如下:
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");
}
字母和數(shù)字鍵的鍵碼值(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 |
數(shù)字鍵盤上的鍵的鍵碼值(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 |
您可能感興趣的文章:
- js獲取及判斷鍵盤按鍵的方法
- JS實現(xiàn)獲取鍵盤按下的按鍵并顯示在頁面上的方法
- JavaScript onkeypress事件入門實例(按下或按住一個鍵盤按鍵)
- JavaScript onkeydown事件入門實例(鍵盤某個按鍵被按下)
- js在輸入框屏蔽按鍵,只能鍵入數(shù)字的示例代碼
- JS獲取鍵盤上任意按鍵的值(實例代碼)
- js獲取鍵盤按鍵響應(yīng)事件(兼容各瀏覽器)
- js中各瀏覽器中鼠標(biāo)按鍵值的差異
- 按鍵盤方向鍵翻頁跳轉(zhuǎn)的javascript代碼(支持ie,firefox)
- JavaScript 監(jiān)聽textarea中按鍵事件
- JS判斷是否長按某一鍵的方法
相關(guān)文章
javascript拖拽上傳類庫DropzoneJS使用方法
這篇文章主要介紹了javascript拖拽上傳類庫DropzoneJS使用方法,大家參考使用吧2013-12-12JavaScript異步隊列進(jìn)行try?catch時的問題解決
這篇文章主要介紹了JavaScript異步隊列進(jìn)行try?catch時的問題解決,文章圍繞主題展開詳細(xì)的的相關(guān)內(nèi)容介紹,需要的朋友可以參考一下2022-07-07Nautil 中使用雙向數(shù)據(jù)綁定的實現(xiàn)
這篇文章主要介紹了Nautil 中使用雙向數(shù)據(jù)綁定的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10Javascript中JSON數(shù)據(jù)分組優(yōu)化實踐及JS操作JSON總結(jié)
這篇文章主要介紹了Javascript中JSON數(shù)據(jù)分組優(yōu)化實踐,文中還對JS操作JSON的要領(lǐng)做了總結(jié),需要的朋友可以參考下2017-12-12