Question

我希望有一个事件侦听器来检测何时按下Command + c，以便可以将某些内容复制到剪贴板。如何收听多个按键？我已经尝试使用useState，useEffect和document.addEventListener进行某些操作，但是没有用。这是我的代码：

const [metaPressed, setMetaPressed] = useState(false)

  useEffect(() => {
    document.addEventListener('keydown', (e) => {
      
      if (e.key === 'Meta') setMetaPressed(true)
        
    })
  })

  useEffect(() => {
    document.addEventListener('keyup', (e) => {

      if (e.key === 'Meta') setMetaPressed(false)
      
    })
  })

Answer 1

行得通吗？

useEffect(() => {
    document.addEventListener('keydown', (e) => {  
        e.preventDefault();
        if ((e.metaKey || e.ctrlKey) && e.code === 'KeyC') {
            console.log('fire!')
        }  
    })
})

Answer 2

此代码非常简单：由于计算机一次仅传递一个按键，因此将创建一个数组来跟踪多个按键。然后可以使用该数组一次检查一个或多个键。

  var map = {}; // You could also use an array
  onkeydown = onkeyup = function(e){
  e = e || event; // to deal with IE
  map[e.keyCode] = e.type == 'keydown';
    /* insert conditional here */
}

仅说明一下，假设您按下A和B，每个都触发一个keydown事件，该事件将map [e.keyCode]设置为e.type == keydown的值，其值为true或false。现在map [65]和map [66]都设置为true。当您放开A时，将触发keyup事件，导致相同的逻辑为map [65]（A）确定相反的结果，该结果现在为false，但是由于map [66]（B）仍为“向下”（它没有触发keyup事件），它仍然为true。现在要将输入元素中的文本复制到剪贴板，我们将创建一个输入元素

<input type="text" value="Hello World" id="myInput">
<button onclick="myFunction()">Copy text</button>

现在CTRL的代码是17，C的代码是67。您可以尝试执行此操作，这样它将复制输入元素中写入的所有内容。

if(map[17] &&  map[67]){ // CTRL+C
    alert('Control Shift C');
    var copyText = document.getElementById("myInput");
    copyText.select();
    copyText.setSelectionRange(0, 99999)
    document.execCommand("copy");
    alert("Copied the text: " + copyText.value);
}

事件监听器中多个键的反应？

2 个答案: