1. 程式人生 > >Jquery給HTML元素繫結按鍵事件-回車事件

Jquery給HTML元素繫結按鍵事件-回車事件

在做網頁的時候,有時是需要js來判斷使用者的按鍵來進行操作對應的功能。
本例項已載入jquery.js

1、全域性判斷按鍵(按回車)

$(document).keypress(function(e) {
       var eCode = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
        if (eCode == 13){
            alert('您按了回車鍵')
            //自己寫判斷操作
        }
});

2、給某個元素(按回車)

$("input[name=keyword]"
).keypress(function(e){ var eCode = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode; if (eCode == 13){ alert('您按了回車鍵') //自己寫判斷函式 } })

這裡的13對應的鍵就是回車鍵。

以下是組合按鍵的應用:


if(e.altKey && e.keyCode==13){
    alert('您同時按了Alt鍵和Enter鍵')
        //ctrl鍵是e.ctrlKey
//shift鍵是e.shiftKey } });

以下是單個按鍵對應的數字,建議使用keyup,keypress在某些瀏覽器不生效:

keycode   8 = BackSpace BackSpace
keycode   9 = Tab Tab
keycode 12 = Clear
keycode 13 = Enter
keycode 16 = Shift_L
keycode 17 = Control_L
keycode 18 = Alt_L
keycode 19 = Pause
keycode 20 = Caps_Lock
keycode 27 = Escape Escape
keycode 32
= space space keycode 33 = Prior keycode 34 = Next keycode 35 = End keycode 36 = Home keycode 37 = Left keycode 38 = Up keycode 39 = Right keycode 40 = Down keycode 41 = Select keycode 42 = Print keycode 43 = Execute keycode 45 = Insert keycode 46 = Delete keycode 47 = Help keycode 48 = 0 equal braceright keycode 49 = 1 exclam on esuperior keycode 50 = 2 quotedbl twosuperior keycode 51 = 3 section threesuperior keycode 52 = 4 dollar keycode 53 = 5 percent keycode 54 = 6 ampersand keycode 55 = 7 slash braceleft keycode 56 = 8 parenleft bracketleft keycode 57 = 9 parenright bracketright keycode 65 = a A keycode 66 = b B keycode 67 = c C keycode 68 = d D keycode 69 = e E EuroSign 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 mu keycode 78 = n N keycode 79 = o O keycode 80 = p P keycode 81 = q Q at 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 96 = KP_0 KP_0 keycode 97 = KP_1 KP_1 keycode 98 = KP_2 KP_2 keycode 99 = KP_3 KP_3 keycode 100 = KP_4 KP_4 keycode 101 = KP_5 KP_5 keycode 102 = KP_6 KP_6 keycode 103 = KP_7 KP_7 keycode 104 = KP_8 KP_8 keycode 105 = KP_9 KP_9 keycode 106 = KP_Multiply KP_Multiply keycode 107 = KP_Add KP_Add keycode 108 = KP_Separator KP_Separator keycode 109 = KP_Subtract KP_Subtract keycode 110 = KP_Decimal KP_Decimal keycode 111 = KP_Divide 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 187 = acute grave keycode 188 = comma semicolon keycode 189 = minus underscore keycode 190 = period colon keycode 192 = numbersign apostrophe keycode 210 = plusminus hyphen macron 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 220 = less greater bar keycode 221 = plus asterisk asciitilde 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

Javascript中 有3個事件控制代碼在對應鍵盤的輸入狀態:keydown、keypress和keyup。
分別對應的意思是:按鍵被按下(按下按鍵但還沒有擡起)、點選按鍵(按下並擡起按鍵)、按鍵擡起(按鍵擡起之後)

按鍵的分類:

按鍵可以分為“實鍵”和“虛鍵”
實鍵可以理解為我們能夠看到並打印出來的按鍵,如字母“A”、數字“1”、字元“?”等等
虛鍵就是那些無法打印出來起到控制作用的按鍵,如“Ctrl”、“Alt”、“Shift”、“方向鍵”等等
IE在處理虛鍵時有個特例:虛鍵不會產生keypress事件,必須使用keydown或keyup來捕獲

按鍵碼和字元碼

按鍵碼是計算機用來識別不同按鍵的編碼,每一個按鍵都有按鍵碼
字元碼是可被列印的實鍵特有的,對應了鍵盤上顯示的字元
按鍵碼可以使用String.fromCharCode()轉換為字元碼
按鍵碼和和字元碼的對應表可以在本文最後找到。

獲取實鍵

$('body').bind('keypress',getKeyCode);   
function getKeyCode(e) {  
    var evt = e || window.event;  
    var keyCode = evt.keyCode || evt.which || evt.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 evt = e || window.event;  
    if (evt.ctrlKey) alert("ctrlKey pressed");  
    if (evt.altKey) alert("altKey pressed");  
    if (evt.shiftKey) alert("shiftKey pressed");  
}  

字母和數字鍵的鍵碼值(keyCode)

這裡寫圖片描述
這裡寫圖片描述
這裡寫圖片描述