JS監(jiān)聽(tīng)組合按鍵思路及實(shí)現(xiàn)過(guò)程
前言
我們經(jīng)常用到組合鍵,例如alt+f4,crtl+enter。在開(kāi)發(fā)中也會(huì)有這種需求。
組合鍵類型
單獨(dú)組合,二鍵組合,三鍵組合
思路
1、獲取鍵盤(pán)上的按鍵
2、阻止瀏覽器上的默認(rèn)行為
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
谷歌瀏覽器對(duì)event.keyCode,event.charCode和event.which都兼容。
火狐瀏覽器對(duì)event.keyCode部分鍵值有效,如上下左右鍵(37,38,39,40),enter鍵(13),PgUp(33),PgDn(34)等部分有效,對(duì)數(shù)字鍵,字母鍵無(wú)效。
event.which也是部分鍵值有效,如字母鍵,數(shù)字鍵,enter鍵,Backspace鍵等有效,對(duì)上下左右鍵,PgUp(33),PgDn(34)鍵無(wú)效。
event.charCode也是對(duì)部分鍵值有效,如字母鍵,數(shù)字鍵,,Backspace鍵等有效,對(duì)enter鍵,上下左右鍵,PgUp(33),PgDn(34)鍵無(wú)效。
ie瀏覽器中,IE8及以下瀏覽器對(duì)event.charCode無(wú)效,event.keyCode和event.which對(duì)大部分鍵值能獲得,但是有少部分也不能獲得。
所以該寫(xiě)法為兼容寫(xiě)法。
e.altKey,e.shiftKey,e.ctrlKey,e.metaKey
用來(lái)監(jiān)聽(tīng)鍵盤(pán)上的alt,shift,ctrl,meta鍵。當(dāng)按下這些鍵的時(shí)候,值會(huì)變?yōu)閠rue。
e.preventDefault()
阻止默認(rèn)事件,在W3C標(biāo)準(zhǔn)和IE下,處理方式不太一致。分別是執(zhí)行e.preventDefault()方法和將e.returnValue = false屬性。當(dāng)然如果你使用的jquery等類庫(kù)的話,只需要寫(xiě)一個(gè)e.preventDefault()就可以了,它幫你做到了兼容。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JS代碼屏蔽F12,右鍵,粘貼,復(fù)制,剪切,選中,操作實(shí)例
在本篇文章里小編給大家分享的是關(guān)于利用JS代碼屏蔽F12,右鍵,粘貼,復(fù)制,剪切,選中,操作,需要的朋友們學(xué)習(xí)下。2019-09-09一個(gè)JavaScript去除字符串末尾的空白實(shí)例代碼
這是一個(gè)JavaScript去除字符串末尾的空白實(shí)例代碼,很簡(jiǎn)單,但很實(shí)用,喜歡的朋友可以參考下2014-09-09JavaScript鍵盤(pán)事件常見(jiàn)用法實(shí)例分析
這篇文章主要介紹了JavaScript鍵盤(pán)事件常見(jiàn)用法,簡(jiǎn)單描述了javascript鍵盤(pán)事件的分類、功能,并結(jié)合實(shí)例形式給出了javascript響應(yīng)鍵盤(pán)事件相關(guān)使用技巧,需要的朋友可以參考下2019-01-01微信小程序scroll-view實(shí)現(xiàn)自定義滾動(dòng)條
這篇文章主要為大家詳細(xì)介紹了微信小程序scroll-view實(shí)現(xiàn)自定義滾動(dòng)條,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-06-06深入解析JavaScript中函數(shù)的Currying柯里化
這篇文章主要介紹了JavaScript中函數(shù)的Currying柯里化,Currying 的重要意義在于可以把函數(shù)完全變成"接受一個(gè)參數(shù)、返回一個(gè)值"的固定形式,需要的朋友可以參考下2016-03-03