如何在没有contentEditable的`div`上添加键盘事件

Question

我想在ctrl + c dom上听div按键事件。我知道我可以通过将keypress设置为true来在dom上添加contentEditable事件（请参见以下代码）。但是它将使div可编辑。我想要的是监听ctrl + c事件，而不使div可编辑。我有办法吗？

$('.mydiv').attr('contentEditable', true);
$('.mydiv').focus();
$('.mydiv').bind('keypress', handler);

Answer 1

您可以尝试一下。 在当前页面的调试器中运行此代码：

document.querySelector('.post-taglist').oncopy = _ => alert('CCCCCCC')

它应该使整个div（在屏幕截图上标记为黄色）侦听复制事件（CTRL + C）。现在，您可以单击div上的任意位置（例如，屏幕截图上标记有红色圆圈的位置），而不是CTRL + C，您将收到警报“ CCCCCCC”

Answer 2

如果将tabindex="0"添加到<div>，则无需使用:focus就可以获取contentEditable。然后，您可以像这样列出ctrl + c：

var ctrlDown = false,
    ctrlKey = 17,
    cKey = 67;

$(document).keydown(function(e){
    if($('div').is(":focus")){
    if (e.keyCode == ctrlKey) ctrlDown = true;
    if (ctrlDown && e.keyCode == cKey){
        alert('dave');
        ctrlDown = false;
    }
  }
})

查看此fiddle可以正常使用。