2017-03-10 66 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