JavaScript 監(jiān)聽組合按鍵思路及代碼實(shí)現(xiàn)
JavaScript監(jiān)聽組合按鍵
1. 思路
如圖，通過監(jiān)聽并打印鍵盤keydown事件，得到圖示內(nèi)容，觀察發(fā)現(xiàn)，
當(dāng)按下的組合鍵包含Ctrl鍵時(shí)，ctrlKey鍵會顯示為true;
當(dāng)按下的組合鍵包含Shift鍵、或者按鍵之前開啟大寫時(shí)，shiftkey鍵會顯示為true;
當(dāng)按下的組合鍵包含Alt鍵時(shí)，altKey鍵會顯示為true;
當(dāng)按下的組合鍵包含meta鍵（Mac電腦上 是 【⌘】、command鍵，非mac電腦為 是win鍵時(shí)，metaKey鍵會顯示為true
另外，按下鍵時(shí)，可通過event獲取對應(yīng)鍵的ascii碼，結(jié)合這些信息就可以對按鍵進(jìn)行判斷了
2. 代碼實(shí)例
// 按下鍵盤事件處理函數(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)聽組合按鍵思路及代碼實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)JavaScript 監(jiān)聽組合按鍵內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- JS如何監(jiān)聽div的resize事件詳解
- JavaScript如何實(shí)現(xiàn)監(jiān)聽鍵盤輸入和鼠標(biāo)監(jiān)點(diǎn)擊
- NodeJS多種創(chuàng)建WebSocket監(jiān)聽的方式(三種)
- js實(shí)現(xiàn)無刷新監(jiān)聽URL的變化示例代碼詳解
- JavaScript監(jiān)聽鍵盤事件代碼實(shí)現(xiàn)
- 使用JS監(jiān)聽鍵盤按下事件（keydown event）
- js 實(shí)現(xiàn)watch監(jiān)聽數(shù)據(jù)變化的代碼
- javascript事件監(jiān)聽與事件委托實(shí)例詳解
- 如何用JS實(shí)現(xiàn)簡單的數(shù)據(jù)監(jiān)聽
相關(guān)文章
下面小編就為大家?guī)硪黄獪\談原生JS中的延遲腳本和異步腳本。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了JavaScript?編寫枚舉的最有效方法分享，JavaScript語言本身不支持枚舉。如果我們想模擬枚舉，我們可以使用一個(gè)對象。更多相關(guān)內(nèi)容感興趣的小伙伴可以參考一下2022-06-06
基于JavaScript+IntersectionObserver實(shí)現(xiàn)高性能圖片懶加載
在 Web 開發(fā)中,圖片懶加載是一種常見的優(yōu)化手段,尤其在長列表頁面中,按需加載圖片可以顯著提升頁面性能,本篇文章將通過 JavaScript 和 Intersection Observer,實(shí)現(xiàn)一個(gè)帶有卡片樣式的高性能圖片懶加載示例,需要的朋友可以參考下2025-01-01
JavaScript實(shí)現(xiàn)顯示和隱藏圖片
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)顯示和隱藏圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
JS連接SQL數(shù)據(jù)庫與ACCESS數(shù)據(jù)庫的方法實(shí)例
這篇文章主要介紹了JS連接SQL數(shù)據(jù)庫與ACCESS數(shù)據(jù)庫的方法實(shí)例，有需要的朋友可以參考一下2013-11-11
Layui 數(shù)據(jù)表格批量刪除和多條件搜索的實(shí)例
今天小編就為大家分享一篇Layui 數(shù)據(jù)表格批量刪除和多條件搜索的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了javascript關(guān)于繼承的用法,實(shí)例匯總了常見的javascript關(guān)于繼承的用法,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了JS散列表碰撞處理、開鏈法、HashTable散列,結(jié)合實(shí)例形式分析了散列表碰撞處理、開鏈法、HashTable散列的定義及簡單使用操作技巧,需要的朋友可以參考下2019-02-02
js之如何刪除多層數(shù)組嵌套的最后一層中的部分?jǐn)?shù)據(jù)
這篇文章主要介紹了js之如何刪除多層數(shù)組嵌套的最后一層中的部分?jǐn)?shù)據(jù)問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
JavaScript解決浮點(diǎn)數(shù)計(jì)算不準(zhǔn)確問題的方法分析
這篇文章主要介紹了JavaScript解決浮點(diǎn)數(shù)計(jì)算不準(zhǔn)確問題的方法,結(jié)合實(shí)例形式分析了javascript浮點(diǎn)數(shù)運(yùn)算精度誤差的原因以及相關(guān)的解決方法與具體操作技巧,需要的朋友可以參考下2018-07-07