JS監(jiān)聽組合按鍵思路及實現(xiàn)過程
前言
我們經(jīng)常用到組合鍵，例如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()就可以了，它幫你做到了兼容。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JS代碼屏蔽F12,右鍵,粘貼,復(fù)制,剪切,選中,操作實例
在本篇文章里小編給大家分享的是關(guān)于利用JS代碼屏蔽F12,右鍵,粘貼,復(fù)制,剪切,選中,操作，需要的朋友們學(xué)習(xí)下。2019-09-09
在現(xiàn)代Web開發(fā)中，JavaScript已經(jīng)成為無法替代的核心技術(shù)，在現(xiàn)代Web開發(fā)中，JavaScript已經(jīng)成為無法替代的核心技術(shù)，本文將通過代碼示例詳細介紹一些實踐解決方案，感興趣的同學(xué)可以參考下2023-06-06
可多次使用的仿126郵箱選項卡的源碼...2007-10-10
這篇文章主要介紹了如何在微信小程序里面退出小程序的方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這是一個JavaScript去除字符串末尾的空白實例代碼，很簡單，但很實用，喜歡的朋友可以參考下2014-09-09
這篇文章主要介紹了基于ajax實現(xiàn)上傳圖片代碼示例解析,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-12-12
這篇文章主要介紹了JavaScript鍵盤事件常見用法,簡單描述了javascript鍵盤事件的分類、功能,并結(jié)合實例形式給出了javascript響應(yīng)鍵盤事件相關(guān)使用技巧,需要的朋友可以參考下2019-01-01
微信小程序scroll-view實現(xiàn)自定義滾動條
這篇文章主要為大家詳細介紹了微信小程序scroll-view實現(xiàn)自定義滾動條，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
這篇文章主要介紹了基于原生JS封裝的Modal對話框插件的示例代碼,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-09-09
深入解析JavaScript中函數(shù)的Currying柯里化
這篇文章主要介紹了JavaScript中函數(shù)的Currying柯里化,Currying 的重要意義在于可以把函數(shù)完全變成"接受一個參數(shù)、返回一個值"的固定形式,需要的朋友可以參考下2016-03-03