快捷導(dǎo)航

js事件綁定快捷鍵以ctrl+k為例

更新時(shí)間：2014年09月30日 15:50:36 投稿：whsnow

js為快捷鍵綁定事件，當(dāng)按這個(gè)快捷鍵時(shí)就會(huì)觸發(fā)事先綁定處理函數(shù)，下面以ctrl+k為例與大家分享下具體的實(shí)現(xiàn)代碼

js代碼

<html> 
<head> 
<script type="text/javascript"> 
window.onload=function(){ 
HotKeyHandler.Init(); 
} 
var HotKeyHandler={ 
currentMainKey:null, 
currentValueKey:null, 
Init:function(){ 
HotKeyHandler.Register(0,"K",function(){alert("注冊(cè)成功");}); 
}, 
Register:function(tag,value,func){ 
var MainKey=""; 
switch(tag){ 
case 0: 
MainKey=17; //Ctrl 
break; 
case 1: 
MainKey=16; //Shift 
break; 
case 2: 
MainKey="18"; //Alt 
break; 
} 
document.onkeyup=function(e){ 
HotKeyHandler.currentMainKey=null; 
} 

document.onkeydown=function(event){ 
//獲取鍵值 
var keyCode= event.keyCode ; 
var keyValue = String.fromCharCode(event.keyCode); 

if(HotKeyHandler.currentMainKey!=null){ 
if(keyValue==value){ 
HotKeyHandler.currentMainKey=null; 
if(func!=null)func(); 
} 
} 
if(keyCode==MainKey) 
HotKeyHandler.currentMainKey=keyCode; 
} 
} 
} 
</script> 
</head> 
<body> 
測(cè)試，按下ctrl+k你就會(huì)發(fā)現(xiàn)神奇的事情發(fā)生了 
</body> 
</html>

您可能感興趣的文章:

相關(guān)文章

使用smartupload組件實(shí)現(xiàn)jsp+jdbc上傳下載文件實(shí)例解析
這篇文章主要介紹了使用smartupload組件實(shí)現(xiàn)jsp+jdbc上傳下載文件實(shí)例解析,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2017-01-01
基于JS實(shí)現(xiàn)飛機(jī)大戰(zhàn)游戲的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何利用JS實(shí)現(xiàn)飛機(jī)大戰(zhàn)游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-06-06
JS移動(dòng)端/H5同時(shí)選擇多張圖片上傳并使用canvas壓縮圖片
這篇文章主要介紹了JS移動(dòng)端/H5同時(shí)選擇多張圖片上傳并使用canvas壓縮圖片,需要的朋友可以參考下
2017-06-06
addEventListener 的用法示例介紹
這篇文章主要介紹了addEventListener 的用法,需要的朋友可以參考下
2014-05-05
JavaScript Typescript基礎(chǔ)使用教程
TypeScript是Microsoft（微軟）開發(fā)的一種開源編程語言，它充分利用了JavaScript原有的對(duì)象模型，并在此基礎(chǔ)上進(jìn)行了擴(kuò)充，TypeScript設(shè)計(jì)目標(biāo)是開發(fā)大型應(yīng)用，它可以編譯成純JavaScript，編譯出來的JavaScript可以運(yùn)行在任何一種JS運(yùn)行環(huán)境中
2022-12-12
javascript獲取元素偏移量的方法有哪些
javascript中可以通過四個(gè)屬性獲得元素的偏移量，offsetHeight、offsetWidth、offsetLeft、offsetTop，下面為大家解釋下各屬性的含義
2014-06-06
深入分析下javascript中的[]()+!
本文是筆者遇到的一個(gè)很無奈的題目之后，不得不仔細(xì)研究一番，有需要的小伙伴來參考下吧。
2015-07-07
如何在JavaScript中運(yùn)行.NET?Core代碼詳情
這篇文章主要介紹了在JavaScript中運(yùn)行.NET?Core代碼詳情，DotNetJS可以將C#項(xiàng)目編譯為與任何環(huán)境兼容的單文件JavaScript庫，變可以在JavaScript中運(yùn)行.NET?Core代碼，相關(guān)操作分享詳情，需要的小伙伴可以參考一下
2022-04-04
詳解webpack打包后如何調(diào)試的方法步驟
這篇文章主要介紹了詳解webpack打包后如何調(diào)試的方法步驟,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-11-11
js實(shí)現(xiàn)飛入星星特效代碼
這篇文章主要介紹了js實(shí)現(xiàn)飛入星星特效代碼,主要通過控制背景與飛入點(diǎn)的樣式,結(jié)合setTimeout函數(shù)即可實(shí)現(xiàn)星星飛入的效果,對(duì)于學(xué)習(xí)javascript有不錯(cuò)的參考借鑒價(jià)值,需要的朋友可以參考下
2014-10-10