JavaScript 監(jiān)聽組合按鍵思路及代碼實現(xiàn)
JavaScript監(jiān)聽組合按鍵
1. 思路
如圖,通過監(jiān)聽并打印鍵盤keydown事件,得到圖示內(nèi)容,觀察發(fā)現(xiàn),
當(dāng)按下的組合鍵包含Ctrl鍵時,ctrlKey鍵會顯示為true;
當(dāng)按下的組合鍵包含Shift鍵、或者按鍵之前開啟大寫時,shiftkey鍵會顯示為true;
當(dāng)按下的組合鍵包含Alt鍵時,altKey鍵會顯示為true;
當(dāng)按下的組合鍵包含meta鍵(Mac電腦上 是 【⌘】、command鍵,非mac電腦為 是win鍵時,metaKey鍵會顯示為true
另外,按下鍵時,可通過event獲取對應(yīng)鍵的ascii碼,結(jié)合這些信息就可以對按鍵進(jìn)行判斷了
2. 代碼實例
// 按下鍵盤事件處理函數(shù) onKeyDown(event) { const keyCode = event.keyCode || event.which || event.charCode; // 有些瀏覽器除了通過keyCode獲取輸入鍵code,還可以通過which,charCode獲取,這么寫是出于瀏覽器兼容性考慮 const keyCombination = event.ctrlKey ; if (keyCombination && keyCode == 75) { console.log("按下了Ctrl + k鍵"); } }
到此這篇關(guān)于JavaScript 監(jiān)聽組合按鍵思路及代碼實現(xiàn)的文章就介紹到這了,更多相關(guān)JavaScript 監(jiān)聽組合按鍵內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- JS如何監(jiān)聽div的resize事件詳解
- JavaScript如何實現(xiàn)監(jiān)聽鍵盤輸入和鼠標(biāo)監(jiān)點擊
- NodeJS多種創(chuàng)建WebSocket監(jiān)聽的方式(三種)
- js實現(xiàn)無刷新監(jiān)聽URL的變化示例代碼詳解
- JavaScript監(jiān)聽鍵盤事件代碼實現(xiàn)
- 使用JS監(jiān)聽鍵盤按下事件(keydown event)
- js 實現(xiàn)watch監(jiān)聽數(shù)據(jù)變化的代碼
- javascript事件監(jiān)聽與事件委托實例詳解
- 如何用JS實現(xiàn)簡單的數(shù)據(jù)監(jiān)聽
相關(guān)文章
一文帶你掌握掌握J(rèn)avaScript中不同屬性類型的細(xì)節(jié)
JavaScript是一種功能強(qiáng)大的編程語言,支持面向?qū)ο蟮木幊谭妒?,本文將介紹JavaScript中面向?qū)ο缶幊痰幕靖拍?,包括對象、屬性類型、定義多個屬性和讀取屬性的特性2023-06-06HTML中Select不用Disabled實現(xiàn)ReadOnly的效果
Disabled ReadOnly之家的聯(lián)系2008-04-04兼容FireFox 用javascript寫的一個畫圖函數(shù)
兼容FireFox 用javascript寫的一個畫圖函數(shù)...2007-08-08微信小程序中多個頁面?zhèn)鲄⑼ㄐ诺膶W(xué)習(xí)與實踐
剛接觸微信小程序,對里面的語法和屬性還不怎么了解,最近正在努力學(xué)習(xí)中,下面這篇文章主要給大家介紹了微信小程序中多個頁面?zhèn)鲄⑼ㄐ诺南嚓P(guān)資料,是最近學(xué)習(xí)的一個內(nèi)容總結(jié),需要的朋友可以參考借鑒,下面來一起看看吧。2017-05-05關(guān)于BootstrapTable 導(dǎo)出數(shù)據(jù)的問題最終解決方案
這篇文章主要介紹了BootstrapTable 導(dǎo)出數(shù)據(jù)的問題,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-03-03js實現(xiàn)數(shù)組內(nèi)數(shù)據(jù)的上移和下移的實例
下面小編就為大家?guī)硪黄猨s實現(xiàn)數(shù)組內(nèi)數(shù)據(jù)的上移和下移的實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-11-11