javascript實現的同時按下ctrl和其他鍵觸發事件

antzone發表於2017-03-29
JavaScript事件

在實際的電腦操作中，經常需要同時按下ctrl和一個其他指定的鍵來實現特定的功能，比如ctrl+A和實現全選功能。

下面就介紹一下如何利用javascript實現同時按下ctrl和其他鍵觸發一個事件的功能。

程式碼如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
<style type="text/css">
#show{
  width:300px;
  line-height:100px;
  background:#CCC;
  font-size:12px;
  text-align:center;
  margin:0px auto;
}
</style>
<script type="text/javascript"> 
window.onload=function(){ 
  HotKeyHandler.Init(); 
} 
var HotKeyHandler={ 
  currentMainKey:null, 
  currentValueKey:null, 
  Init:function(){ 
    HotKeyHandler.Register(0,"K",function(){alert("softwhy.com");}); 
  }, 
  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> 
<div id="show">按下ctrl和k鍵觸發事件</div> 
</body> 
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

1.window.onload=function(){HotKeyHandler.Init();} ，當文件內容完全載入完畢再去執行HotKeyHandler.Init()。

2.var HotKeyHandler={}，這個是對功能的封裝，可以看做一個名稱空間，可以有效的防止衝突。

3.currentMainKey:null，此屬性賦初值為null，用來儲存按鍵碼。

4.currentValueKey:null，此屬性賦初值為null，用來儲存按鍵的值，也就是abc這樣的東西。

5.Init:function(){HotKeyHandler.Register(0,"K",function(){alert("softwhy.com");});}，此函式用來註冊事件處理函式，函式第一個引數是一個標識值，比如0代表按下ctrl，1代表按下shift，第二個引數是要按下ctrl加哪個鍵，第三個是事件觸發喲啊執行的函式。6.Register:function(tag,value,func)，用來註冊事件處理函式，引數的作用上面已經介紹了。

7.var MainKey=""，宣告一個變數並賦值為空字串，用來儲存按鍵碼的。

8.switch(tag){ 

  case 0:

    MainKey=17;

      break;

  case 1: 

    MainKey=16;

      break; 

  case 2: 

    MainKey="18";

    break; 

} ，這個switch語句就是用來判斷是要按下ctrl、shift還是alt鍵。9.document.onkeyup=function(e){ 

  HotKeyHandler.currentMainKey=null; 

}，註冊onkeyup事件處理函式，當按鍵鬆開的時候會清空currentMainKey，否則相當於ctrl等鍵一直處於按下的狀態。

10.document.onkeydown=function(event){}，註冊onkeydow事件處理函式，也就是當按下鍵盤會觸發此事件。11.var keyCode= event.keyCode，獲取按鍵碼。

12.var keyValue = String.fromCharCode(keyCode)，按鍵碼和ASCII碼有重合的部分，比如數字和字母，所以這樣可以獲取到底是按下了哪個鍵。

13.if(HotKeyHandler.currentMainKey!=null)，如果為空，也就是ctrl等鍵還沒有按下。

14.if(keyValue==value){ 

  HotKeyHandler.currentMainKey=null; 

  if(func!=null)func(); 

} ，判斷按鍵值是否等於value，在本程式碼中就是是不是k，如果是就清空currentMainKey，因為一個完整的操作已經完成，然後執行響應的函式。

15.if(keyCode==MainKey){

  HotKeyHandler.currentMainKey=keyCode; 

},判斷是否按下了ctrl等鍵，如果是就賦值給currentMainKey。

二.相關閱讀:

1.switch語句可以參閱javascript switch一章節。

2.keyCode可以參閱js的鍵盤按鍵keyCode屬性值對應表一章節。

3.fromCharCode()函式可以參閱javascript fromCharCode()一章節。

相關文章