jquery鍵盤常見事件---

farsun發表於2021-09-09
jQuery事件

一、在看jquery的時候有幾個常見的鍵盤事件，我寫在這裡：

1、keydown()
keydown事件會在鍵盤按下時觸發.
2、keyup()
keyup事件會在按鍵釋放時觸發,也就是你按下鍵盤起來後的事件
3、keypress()
keypress事件會在敲擊按鍵時觸發,我們可以理解為按下並抬起同一個按鍵

二、鍵盤對應的ASCII碼：

常見的例如上下左右鍵，分別為38,40,37,39。也就是從左鍵開始順時針旋轉。

也可以利用下面這段程式碼去獲取

$(document).keydown(function(event){
console.log(event.keyCode);//FF下除錯
});
上面例子中,event.keyCode就可以幫助我們獲取到我們按下了鍵盤上的什麼按鍵,返回的是ascII碼

三、示例

複製程式碼




鍵盤
msg{position: absolute;left: 100px;top: 100px} 
    .msg_caption span{font: 12px Arial;color: #fff;background: #647D65;width: 45px;display: block;float: left;margin: 0 2px;padding: 7px 0;text-align: center;cursor: pointer;}
    .clearfloat:after { visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0; }
    .clearfloat {  zoom: 1; /* triggers hasLayout */ display: inline-block; /* resets display for IE/Win */}
    div textarea{padding: 3px; width: 200px;height: 150px;overflow: auto;border: 1px solid #000}





向上
向下



複製程式碼
四、相容性

e = event || window.event;//獲取事件，這樣寫是為了相容ie瀏覽器
currKey = e.keyCode || e.which || e.charCode;//獲取按鍵，也是為了相容瀏覽器
||表示，如果前面的成立就等於前面的，反之則後面的
在IE下：

支援keyCode
不支援which和charCode,二者值為 undefined
在Firefox下：
支援keyCode，除功能鍵外，其他鍵值始終為 0
支援which和charCode，二者的值相同
在Opera下：
支援keyCode和which，二者的值相同
不支援charCode，值為 undefined

測試程式碼：

複製程式碼

請按下任意鍵看測試效果：


type:

當前Key:

Decimal:

keyCode: 注：在FF下,keyCode始終為0

which: 注：在IE下,which始終為undefined ； 在Opera下，keyCode和charCode二者的值相同

charCode: 注：在IE、Opera下,charCode始終為undefined ; 在FF下，which和charCode二者的值相同

大寫:

altKey:

ctrlKey:

shiftKey:

repeat:

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/4289/viewspace-2807467/，如需轉載，請註明出處，否則將追究法律責任。

相關文章