JavaScript 監(jiān)聽(tīng)組合按鍵思路及代碼實(shí)現(xiàn)
JavaScript監(jiān)聽(tīng)組合按鍵
1. 思路

如圖,通過(guò)監(jiān)聽(tīng)并打印鍵盤keydown事件,得到圖示內(nèi)容,觀察發(fā)現(xiàn),當(dāng)按下的組合鍵包含Ctrl鍵時(shí),ctrlKey鍵會(huì)顯示為true;當(dāng)按下的組合鍵包含Shift鍵、或者按鍵之前開(kāi)啟大寫時(shí),shiftkey鍵會(huì)顯示為true; 當(dāng)按下的組合鍵包含Alt鍵時(shí),altKey鍵會(huì)顯示為true;當(dāng)按下的組合鍵包含meta鍵(Mac電腦上 是 【⌘】、command鍵,非mac電腦為 是win鍵時(shí),metaKey鍵會(huì)顯示為true另外,按下鍵時(shí),可通過(guò)event獲取對(duì)應(yīng)鍵的ascii碼,結(jié)合這些信息就可以對(duì)按鍵進(jìn)行判斷了
2. 代碼實(shí)例
// 按下鍵盤事件處理函數(shù) onKeyDown(event) { const keyCode = event.keyCode || event.which || event.charCode; // 有些瀏覽器除了通過(guò)keyCode獲取輸入鍵code,還可以通過(guò)which,charCode獲取,這么寫是出于瀏覽器兼容性考慮 const keyCombination = event.ctrlKey ; if (keyCombination && keyCode == 75) { console.log('按下了Ctrl + k鍵'); } }
到此這篇關(guān)于JavaScript 監(jiān)聽(tīng)組合按鍵思路及代碼實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)JavaScript 監(jiān)聽(tīng)組合按鍵內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!
相關(guān)文章:
1. 詳解Android studio 動(dòng)態(tài)fragment的用法2. 基于android studio的layout的xml文件的創(chuàng)建方式3. 編程語(yǔ)言PHP在Web開(kāi)發(fā)領(lǐng)域的優(yōu)勢(shì)在哪?4. 解決Android studio xml界面無(wú)法預(yù)覽問(wèn)題5. 什么是python的自省6. Spring Boot和Thymeleaf整合結(jié)合JPA實(shí)現(xiàn)分頁(yè)效果(實(shí)例代碼)7. 圖文詳解vue中proto文件的函數(shù)調(diào)用8. Android如何加載Base64編碼格式圖片9. Springboot Druid 自定義加密數(shù)據(jù)庫(kù)密碼的幾種方案10. Vue封裝一個(gè)TodoList的案例與瀏覽器本地緩存的應(yīng)用實(shí)現(xiàn)

網(wǎng)公網(wǎng)安備