JS鍵盤按鈕keyCode及示例大全

以功能區分佈


以 keycode 編號順序分佈

keycode 0 =

keycode 1 =
keycode 2 =
keycode 3 =
keycode 4 =
keycode 5 =
keycode 6 =
keycode 7 =
keycode 8 = BackSpace
keycode 9 = Tab
keycode 10 =
keycode 11 =
keycode 12 = Clear
keycode 13 = Enter
keycode 14 =
keycode 15 =
keycode 16 = Shift_L
keycode 17 = Control_L
keycode 18 = Alt_L
keycode 19 = Pause
keycode 20 = Caps_Lock
keycode 21 =
keycode 22 =
keycode 23 =
keycode 24 =
keycode 25 =
keycode 26 =
keycode 27 = Esc Escape
keycode 28 =
keycode 29 =
keycode 30 =
keycode 31 =
keycode 32 = Space
keycode 33 = Page Up
keycode 34 = Page Down
keycode 35 = End
keycode 36 = Home
keycode 37 = Left Arrow
keycode 38 = Up Arrow
keycode 39 = Right Arrow
keycode 40 = Down Arrow
keycode 41 = Select
keycode 42 = Print
keycode 43 = Execute
keycode 44 =
keycode 45 = Insert
keycode 46 = Delete
keycode 47 = Help
keycode 48 = 0 )
keycode 49 = 1 !
keycode 50 = 2 @
keycode 51 = 3 #
keycode 52 = 4 $
keycode 53 = 5 %
keycode 54 = 6 ^
keycode 55 = 7 &
keycode 56 = 8 *
keycode 57 = 9 (
keycode 58 =
keycode 59 =
keycode 60 =
keycode 61 =
keycode 62 =
keycode 63 =
keycode 64 =
keycode 65 = a A
keycode 66 = b B
keycode 67 = c C
keycode 68 = d D
keycode 69 = e E
keycode 70 = f F
keycode 71 = g G
keycode 72 = h H
keycode 73 = i I
keycode 74 = j J
keycode 75 = k K
keycode 76 = l L
keycode 77 = m M
keycode 78 = n N
keycode 79 = o O
keycode 80 = p P
keycode 81 = q Q
keycode 82 = r R
keycode 83 = s S
keycode 84 = t T
keycode 85 = u U
keycode 86 = v V
keycode 87 = w W
keycode 88 = x X
keycode 89 = y Y
keycode 90 = z Z
keycode 91 =
keycode 92 =
keycode 93 =
keycode 94 =
keycode 95 =
keycode 96 = KP_0
keycode 97 = KP_1
keycode 98 = KP_2
keycode 99 = KP_3
keycode 100 = KP_4
keycode 101 = KP_5
keycode 102 = KP_6
keycode 103 = KP_7
keycode 104 = KP_8
keycode 105 = KP_9
keycode 106 = KP_* KP_Multiply
keycode 107 = KP_+ KP_Add
keycode 108 = KP_Enter KP_Separator
keycode 109 = KP_- KP_Subtract
keycode 110 = KP_. KP_Decimal
keycode 111 = KP_/ KP_Divide
keycode 112 = F1
keycode 113 = F2
keycode 114 = F3
keycode 115 = F4
keycode 116 = F5
keycode 117 = F6
keycode 118 = F7
keycode 119 = F8
keycode 120 = F9
keycode 121 = F10
keycode 122 = F11
keycode 123 = F12
keycode 124 = F13
keycode 125 = F14
keycode 126 = F15
keycode 127 = F16
keycode 128 = F17
keycode 129 = F18
keycode 130 = F19
keycode 131 = F20
keycode 132 = F21
keycode 133 = F22
keycode 134 = F23
keycode 135 = F24
keycode 136 = Num_Lock
keycode 137 = Scroll_Lock
keycode 138 =
keycode 139 =
keycode 140 =
keycode 141 =
keycode 142 =
keycode 143 =
keycode 144 =
keycode 145 =
keycode 146 =
keycode 147 =
keycode 148 =
keycode 149 =
keycode 150 =
keycode 151 =
keycode 152 =
keycode 153 =
keycode 154 =
keycode 155 =
keycode 156 =
keycode 157 =
keycode 158 =
keycode 159 =
keycode 160 =
keycode 161 =
keycode 162 =
keycode 163 =
keycode 164 =
keycode 165 =
keycode 166 =
keycode 167 =
keycode 168 =
keycode 169 =
keycode 170 =
keycode 171 =
keycode 172 =
keycode 173 =
keycode 174 =
keycode 175 =
keycode 176 =
keycode 177 =
keycode 178 =
keycode 179 =
keycode 180 =
keycode 181 =
keycode 182 =
keycode 183 =
keycode 184 =
keycode 185 =
keycode 186 =
keycode 187 = =+
keycode 188 = ,<
keycode 189 = -_
keycode 190 = .>
keycode 191 = /?
keycode 192 = `~
keycode 193 =
keycode 194 =
keycode 195 =
keycode 196 =
keycode 197 =
keycode 198 =
keycode 199 =
keycode 200 =
keycode 201 =
keycode 202 =
keycode 203 =
keycode 204 =
keycode 205 =
keycode 206 =
keycode 207 =
keycode 208 =
keycode 209 =
keycode 210 = plusminus hyphen macron
keycode 211 =
keycode 212 = copyright registered
keycode 213 = guillemotleft guillemotright
keycode 214 = masculine ordfeminine
keycode 215 = ae AE
keycode 216 = cent yen
keycode 217 = questiondown exclamdown
keycode 218 = onequarter onehalf threequarters
keycode 219 = [{
keycode 220 = \|
keycode 221 = ]}
keycode 222 = '"

keycode 223 =
keycode 224 =
keycode 225 =
keycode 226 =
keycode 227 = multiply division
keycode 228 = acircumflex Acircumflex
keycode 229 = ecircumflex Ecircumflex
keycode 230 = icircumflex Icircumflex
keycode 231 = ocircumflex Ocircumflex
keycode 232 = ucircumflex Ucircumflex
keycode 233 = ntilde Ntilde
keycode 234 = yacute Yacute
keycode 235 = oslash Ooblique
keycode 236 = aring Aring
keycode 237 = ccedilla Ccedilla
keycode 238 = thorn THORN
keycode 239 = eth ETH
keycode 240 = diaeresis cedilla currency
keycode 241 = agrave Agrave atilde Atilde
keycode 242 = egrave Egrave
keycode 243 = igrave Igrave
keycode 244 = ograve Ograve otilde Otilde
keycode 245 = ugrave Ugrave
keycode 246 = adiaeresis Adiaeresis
keycode 247 = ediaeresis Ediaeresis
keycode 248 = idiaeresis Idiaeresis
keycode 249 = odiaeresis Odiaeresis
keycode 250 = udiaeresis Udiaeresis
keycode 251 = ssharp question backslash
keycode 252 = asciicircum degree
keycode 253 = 3 sterling
keycode 254 = Mode_switch

簡記表

數字值 實際鍵值
48到57 0到9
65到90 a到z(A到Z)
112到135 F1到F24
8 BackSpace(退格)
9 Tab
13 Enter(回車)
20 Caps_Lock(大寫鎖定)
32 Space(空格鍵)
37 Left(左箭頭)
38 Up(上箭頭)
39 Right(右箭頭)
40 Down(下箭頭)
 

使用示例:

組合鍵

if ((window.event.ctrlKey)&&(window.event.keyCode==49))

alert("您按下了CTRL+1鍵");

從以上例子可以看出,shift、Control、Alt 在JS中也可用“window.event.shiftKey”、“window.event.ctrlKey”、“window.event.altKey” 代替。

Internet Explorer/Chrome 瀏覽器使用 event.keyCode 取回被按下的字符,而 Netscape/Firefox/Opera 等瀏覽器使用 event.which。

 

獲取用戶按下的鍵

下面是一個利用 onkeydown 事件獲取用戶按下鍵盤按鍵信息的例子:

 

<html>
<body>
<script type="text/javascript">

function noNumbers(e)
{
    var keynum;
    var keychar;

    keynum = window.event ? e.keyCode : e.which;
    keychar = String.fromCharCode(keynum);
    alert(keynum+':'+keychar);
}

</script>
<input type="text" onkeydown="return noNumbers(event)" />
</body>
</html>

如上面例子所示,event.keyCode/event.which 得到的是一個按鍵對應的數字值(Unicode 編碼),常用鍵值對應如下:

在 Web 應用中,常常可以看到利用 onkeydown 事件的 event.keyCode/event.which 來獲取用戶的一些鍵盤操作,從而運行某些運用的例子。如在用戶登錄時,如果按下了大寫鎖定鍵(20),則加以提示大寫鎖定;在有翻頁的時候,如果用戶按下左右箭頭,觸發上下翻頁等。

獲得 Unicode 編碼值之後,如果需要得到實際對應的按鍵值,可以通過 Srting 對象的 fromCharCode 方法(String.fromCharCode())獲得。注意,對於字符獲得的始終是大寫字符,而對於其他一些功能按鍵,得到的字符可能不太易閱讀。

javascript判斷是否按回車鍵

 

<input id="chatMsg" name="chatMsg" type="text"

size="90" onkeypress="enterHandler(event);"/>

 

function enterHandler(event)

{

//獲取用戶單擊鍵盤的“鍵值”

var keyCode = event.keyCode ? event.keyCode 

: event.which ? event.which : event.charCode;

//如果是回車鍵

if (keyCode == 13)

{

sendRequest();

}

}

屏蔽按鍵組合健

function Key Down() {
    if ((window.event.altKey) && ((window.event.keyCode == 37) || //屏蔽 Alt+ 方向鍵 ← 
        (window.event.keyCode == 39))) { //屏蔽 Alt+ 方向鍵 → 
        alert("不准你使用ALT+方向鍵前進或後退網頁!");
        event.returnValue = false;
    }
    if ((event.keyCode == 8) || //屏蔽退格刪除鍵 
        (event.keyCode == 116)) { //屏蔽 F5 刷新鍵 
        event.keyCode = 0;
        event.returnValue = false;
    }
    if ((event.ctrlKey) && (event.keyCode == 78)) { //屏蔽 Ctrl+n 
        event.returnValue = false;
    }
    if ((event.shiftKey) && (event.keyCode == 121)) { //屏蔽 shift+F10 
        event.returnValue = false;
    }
    if (event.keyCode == 122) { //屏蔽 F11 
        event.returnValue = false;
    }
}

獲取鍵和相應值的js

另附上一段代碼,

可以根據按的鍵盤上的鍵,顯示鍵盤動作,並顯示keyCode值等

<STYLE TYPE="text/css">
    TD {
    text-align: center
}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
    function init() {
        document.onkeydown = showKeyDown
        document.onkeyup = showKeyUp
        document.onkeypress = showKeyPress
    }

    function showKeyDown(evt) {
        evt = (evt) ? evt : window.event
        document.getElementById("pressKeyCode").innerHTML = 0
        document.getElementById("upKeyCode").innerHTML = 0
        document.getElementById("pressCharCode").innerHTML = 0
        document.getElementById("upCharCode").innerHTML = 0
        restoreModifiers("")
        restoreModifiers("Down")
        restoreModifiers("Up")
        document.getElementById("downKeyCode").innerHTML = evt.keyCode
        if (evt.charCode) {
            document.getElementById("downCharCode").innerHTML = evt.charCode
        }
        showModifiers("Down", evt)
    }

    function showKeyUp(evt) {
        evt = (evt) ? evt : window.event
        document.getElementById("upKeyCode").innerHTML = evt.keyCode
        if (evt.charCode) {
            document.getElementById("upCharCode").innerHTML = evt.charCode
        }
        showModifiers("Up", evt)
        return false
    }

    function showKeyPress(evt) {
        evt = (evt) ? evt : window.event
        document.getElementById("pressKeyCode").innerHTML = evt.keyCode
        if (evt.charCode) {
            document.getElementById("pressCharCode").innerHTML = evt.charCode
        }
        showModifiers("", evt)
        return false
    }

    function showModifiers(ext, evt) {
        restoreModifiers(ext)
        if (evt.shiftKey) {
            document.getElementById("shift" + ext).style.backgroundColor = "#ff0000"
        }
        if (evt.ctrlKey) {
            document.getElementById("ctrl" + ext).style.backgroundColor = "#00ff00"
        }
        if (evt.altKey) {
            document.getElementById("alt" + ext).style.backgroundColor = "#0000ff"
        }
    }

    function restoreModifiers(ext) {
        document.getElementById("shift" + ext).style.backgroundColor = "#ffffff"
        document.getElementById("ctrl" + ext).style.backgroundColor = "#ffffff"
        document.getElementById("alt" + ext).style.backgroundColor = "#ffffff"
    }
</SCRIPT>
</HEAD>

<BODY onLoad="init()">
    <H1>Keyboard Event Handler Lab</H1> 
    <HR>
    <FORM>
        <TABLE BORDER=2 CELLPADDING=2>
            <TR>
                <TH></TH>
                <TH>onKeyDown</TH>
                <TH>onKeyPress</TH>
                <TH>onKeyUp</TH>
            </TR>
            <TR>
                <TH>Key Codes</TH>
                <TD ID="downKeyCode">0</TD>
                <TD ID="pressKeyCode">0</TD>
                <TD ID="upKeyCode">0</TD>
            </TR>
            <TR>
                <TH>Char Codes (IE5/Mac; NN6)</TH>
                <TD ID="downCharCode">0</TD>
                <TD ID="pressCharCode">0</TD>
                <TD ID="upCharCode">0</TD>
            </TR>
            <TR>
                <TH ROWSPAN=3>Modifier Keys</TH>
                <TD>
                    <SPAN ID="shiftDown">Shift</SPAN>
                </TD>
                <TD>
                    <SPAN ID="shift">Shift</SPAN>
                </TD>
                <TD>
                    <SPAN ID="shiftUp">Shift</SPAN>
                </TD>
            </TR>
            <TR>
                <TD>
                    <SPAN ID="ctrlDown">Ctrl</SPAN>
                </TD>
                <TD>
                    <SPAN ID="ctrl">Ctrl</SPAN>
                </TD>
                <TD>
                    <SPAN ID="ctrlUp">Ctrl</SPAN>
                </TD>
            </TR>
            <TR>
                <TD>
                    <SPAN ID="altDown">Alt</SPAN>
                </TD>
                <TD>
                    <SPAN ID="alt">Alt</SPAN>
                </TD>
                <TD>
                    <SPAN ID="altUp">Alt</SPAN>
                </TD>
            </TR>
        </TABLE>
    </FORM>
</BODY>

 

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章