JS監(jiān)聽組合按鍵思路及實現(xiàn)過程
前言
我們經常用到組合鍵,例如alt+f4,crtl+enter。在開發(fā)中也會有這種需求。
組合鍵類型
單獨組合,二鍵組合,三鍵組合
思路
1、獲取鍵盤上的按鍵
2、阻止瀏覽器上的默認行為
3、執(zhí)行自定義的js函數(shù)
代碼例子
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)等部分有效,對數(shù)字鍵,字母鍵無效。
event.which也是部分鍵值有效,如字母鍵,數(shù)字鍵,enter鍵,Backspace鍵等有效,對上下左右鍵,PgUp(33),PgDn(34)鍵無效。
event.charCode也是對部分鍵值有效,如字母鍵,數(shù)字鍵,,Backspace鍵等有效,對enter鍵,上下左右鍵,PgUp(33),PgDn(34)鍵無效。
ie瀏覽器中,IE8及以下瀏覽器對event.charCode無效,event.keyCode和event.which對大部分鍵值能獲得,但是有少部分也不能獲得。
所以該寫法為兼容寫法。
e.altKey,e.shiftKey,e.ctrlKey,e.metaKey
用來監(jiān)聽鍵盤上的alt,shift,ctrl,meta鍵。當按下這些鍵的時候,值會變?yōu)閠rue。
e.preventDefault()
阻止默認事件,在W3C標準和IE下,處理方式不太一致。分別是執(zhí)行e.preventDefault()方法和將e.returnValue = false屬性。當然如果你使用的jquery等類庫的話,只需要寫一個e.preventDefault()就可以了,它幫你做到了兼容。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
基于JavaScript開發(fā)一個有趣的分組抽簽小程序
在團隊合作開發(fā)中,經常需要將團隊成員分組,來完成各自的任務,而抽簽的方式自然是最公平、最簡單的方法之一,所以本文就來開發(fā)一個有趣的分組抽簽小程序吧2023-05-05
深入理解JavaScript系列(4) 立即調用的函數(shù)表達式
大家學JavaScript的時候,經常遇到自執(zhí)行匿名函數(shù)的代碼,今天我們主要就來想想說一下自執(zhí)行2012-01-01
原生JS利用transform實現(xiàn)banner的無限滾動示例代碼
這篇文章主要介紹了原生JS利用transform實現(xiàn)banner的無限滾動示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
詳解JavaScript中扁平與樹形數(shù)據(jù)的轉換
這篇文章主要為大家想介紹了JavaScript中實現(xiàn)扁平與樹形數(shù)據(jù)相互轉換的方法,文中的示例代碼講解詳細,對我們學習JavaScript有一定的幫助,需要的可以參考一下2023-01-01
javascript上傳圖片前預覽圖片兼容大多數(shù)瀏覽器
上傳圖片前預覽圖片這種效果應用比較廣泛,實現(xiàn)的方也大同小異,下面為大家介紹下,在javascript中是如何實現(xiàn)的,感興趣的朋友可以參考下2013-10-10
JavaScript markdown 編輯器實現(xiàn)雙屏同步滾動
這篇文章主要介紹了JavaScript markdown 編輯器實現(xiàn)雙屏同步滾動,文章圍繞主題展開詳細的內容介紹,具有一定的參考價值,需要的小伙伴可以參考一下2022-08-08

