Javascript 檢測鍵盤按鍵信息及鍵碼值對應介紹
更新時間:2013年01月03日 16:18:59 作者:
Javascript中有3個事件句柄在對應鍵盤的輸入狀態(tài):按鍵被按下(按下按鍵但還沒有抬起)、點擊按鍵(按下并抬起按鍵)、按鍵抬起(按鍵抬起之后),接下來詳細介紹,感興趣的朋友可以了解下
Javascript中有3個事件句柄在對應鍵盤的輸入狀態(tài):keydown、keypress和keyup。
分別對應的意思是:按鍵被按下(按下按鍵但還沒有抬起)、點擊按鍵(按下并抬起按鍵)、按鍵抬起(按鍵抬起之后)
按鍵的分類
按鍵可以分為“實鍵”和“虛鍵”
實鍵可以理解為我們能夠看到并打印出來的按鍵,如字母“A”、數(shù)字“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;就表示:獲取當前正在發(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");
}
分別對應的意思是:按鍵被按下(按下按鍵但還沒有抬起)、點擊按鍵(按下并抬起按鍵)、按鍵抬起(按鍵抬起之后)
按鍵的分類
按鍵可以分為“實鍵”和“虛鍵”
實鍵可以理解為我們能夠看到并打印出來的按鍵,如字母“A”、數(shù)字“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;就表示:獲取當前正在發(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");
}
| 字母和數(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 | ||||||
相關文章
一道面試題引發(fā)的對javascript類型轉換的思考
本文主要介紹了javascript類型轉換的相關知識,具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
一文詳解JavaScript的事件監(jiān)聽(最新整理)
Web頁面需要經(jīng)常和用戶之間進行交互,而交互的過程中我們可能想要捕捉這個交互的過程,比如用戶點擊了某個按鈕、用戶在輸入框里面輸入了某個文本、用戶鼠標經(jīng)過了某個位置,下面介紹下JavaScript的事件監(jiān)聽,感興趣的朋友一起看看吧2024-01-01
var?let?const關鍵字之間的區(qū)別及使用場景示例詳解
這篇文章主要為大家介紹了var?let?const關鍵字之間的區(qū)別及使用場景示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-12-12

