js監聽組合按鍵
阿新 • • 發佈:2020-12-30
前言
我們經常用到組合鍵,例如alt+f4,crtl+enter。在開發中也會有這種需求。
組合鍵型別
單獨組合,二鍵組合,三鍵組合
思路
1、獲取鍵盤上的按鍵
2、阻止瀏覽器上的預設行為
3、執行自定義的js函式
程式碼例子
document.onkeydown = function(e) { var keyCode = e.keyCode || e.which || e.charCode; var altKey = e.altKey ; if(altKey && keyCode == 112) { alert("組合鍵成功") } e.preventDefault(); return false; }
解刨
e.keyCode || e.which || e.charCode
谷歌瀏覽器對event.keyCode,event.charCode和event.which都相容。
火狐瀏覽器對event.keyCode部分鍵值有效,如上下左右鍵(37,38,39,40),enter鍵(13),PgUp(33),PgDn(34)等部分有效,對數字鍵,字母鍵無效。
event.which也是部分鍵值有效,如字母鍵,數字鍵,enter鍵,Backspace鍵等有效,對上下左右鍵,PgUp(33),PgDn(34)鍵無效。
event.charCode也是對部分鍵值有效,如字母鍵,數字鍵,,Backspace鍵等有效,對enter鍵,上下左右鍵,PgUp(33),PgDn(34)鍵無效。
ie瀏覽器中,IE8及以下瀏覽器對event.charCode無效,event.keyCode和event.which對大部分鍵值能獲得,但是有少部分也不能獲得。
所以該寫法為相容寫法。
e.altKey,e.shiftKey,e.ctrlKey,e.metaKey
用來監聽鍵盤上的alt,shift,ctrl,meta鍵。當按下這些鍵的時候,值會變為true。
e.preventDefault()
阻止預設事件,在W3C標準和IE下,處理方式不太一致。分別是執行e.preventDefault()方法和將e.returnValue = false屬性。當然如果你使用的jquery等類庫的話,只需要寫一個e.preventDefault()就可以了,它幫你做到了相容。