2017-03-10 68 views
2

我覺得這段代碼很有趣,因爲每次我按下鍵盤上的一個鍵就會發出警報。然而如何檢測與組合鍵如何檢測多個(組合)鍵盤按?

  1. Alt + 1 - 我想提醒的東西
  2. Alt + 2 - 同樣在這裏

ETC.我想要的任何組合。

我試試他的代碼,如果語句它

$(document).keypress(function(event){ 
 
    alert(String.fromCharCode(event.which)); 
 
if(String.fromCharCode(event.which) == "a"){ 
 
    \t alert("Hi A."); 
 
} 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

感謝Coyod

+1

這不是一個多按鍵。這是一個修改器的關鍵新聞。修飾符是Control,Alt和Shift。該術語可以幫助您進行搜索。 –

+0

@KenWhite'Alt'就是我的例子。但是有可能檢測到它?如果我同時按'A'和'B',我想提醒某事 – KiRa

+1

您不能同時按A和B;只有一個將被承認。沒有* AB *鍵這樣的東西。您**可以**同時按下修改鍵*和另一個鍵。看一下'event'的其他部分,比如'event.altKey'(它告訴你Alt鍵是否被按下)。修改鍵*修改*關閉時按下的鍵。 –

回答

1

創建一個如果你改變了事件​​你會得到額外的事件數據這會告訴你是否有任何修飾鍵被按下。

然後在事件回調中,您可以檢查event.altKey以檢查當前是否按下alt鍵。

$(document).keydown(function(event) { 
 
    if (event.altKey) { 
 
    switch (String.fromCharCode(event.which)) { 
 
     case 'A': 
 
     console.log('Hi A') 
 
     break 
 
     case 'B': 
 
     console.log('Hi B') 
 
     break 
 
    } 
 
    } 
 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

這裏是一個更好的例子,將讓所有按鍵的狀態,讓您如果超過一個鍵的同時按下測試。在回調函數中,您有一個函數checkKeysPressed,它接收您希望添加事件的鍵,如果按下這些鍵,函數將返回true。

它使用ES6語法,函數和對象,但它可以很容易地轉換爲ES5或只是通過babel運行。

const multipleKeysEventListener = (element, callback) => { 
 
    
 
    const keysPressed = new Set 
 
    
 
    const describeKey = e => { 
 
    switch(e.which) { 
 
     case 18: 
 
     return 'ALT' 
 
     case 16: 
 
     return 'SHIFT' 
 
     default: 
 
     return String.fromCharCode(e.which) 
 
    } 
 
    } 
 
    
 
    const checkPressedKeys = (...keys) => 
 
    keys.every(x => 
 
     keysPressed.has(
 
     typeof(x) === 'number' 
 
      ? String.fromCharCode(x) 
 
      : x 
 
    ) 
 
    ) 
 
    
 
    const down = e => { 
 
    keysPressed.add(describeKey(e)) 
 
    return callback(checkPressedKeys, e) 
 
    } 
 
    
 
    const up = e => { 
 
    keysPressed.delete(describeKey(e)) 
 
    } 
 
    
 
    $(element).keydown(down) 
 
    $(element).keyup(up) 
 
} 
 

 
multipleKeysEventListener(document, (checkKeysPressed, e) => { 
 
    switch (true) { 
 
    // you can pass keys 
 
    case checkKeysPressed('A', 'B'): 
 
     console.log('A and B pressed') 
 
     break 
 
    // you can pass modifiers 
 
    case checkKeysPressed('ALT', 'A'): 
 
     console.log('ALT and A pressed') 
 
     break 
 
    // and you can pass keyCodes 
 
    case checkKeysPressed('ALT', 67): 
 
     console.log('ALT and C pressed') 
 
     break 
 
    default: 
 
     console.log(String.fromCharCode(e.which)) 
 
    } 
 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

+0

感謝它的工作和解決我的問題。 – KiRa