您好,登錄后才能下訂單哦!
小編這次要給大家分享的是如何實現JS監聽組合按鍵,文章內容豐富,感興趣的小伙伴可以來了解一下,希望大家閱讀完這篇文章之后能夠有所收獲。
前言
我們經常用到組合鍵,例如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()就可以了,它幫你做到了兼容。
看完這篇關于如何實現JS監聽組合按鍵的文章,如果覺得文章內容寫得不錯的話,可以把它分享出去給更多人看到。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。