DOM 的某个元素中的 Keydown 事件

Question

是否可以在 DOM 的单个元素中捕获键盘按键组合的事件？ 我的意思是，我想要的是，如果我有一个

<div id="k"><input id="text" type="text"></div>
<div id="j"><input id="text" type="text"></div>

我只想在 id 为“k”的 div 上获取键 Ctrl+H 的组合

Answer 1

解决了将 tabindex 1 添加到“.upper-canvas”（是的，有空格）元素，然后使用 jQuery 绑定“.upper-canvas”上的 keydown。

var canvas = new fabric.Canvas('c');
$(document).ready(function(){
    $(".upper-canvas ").attr('tabindex', 1);
})
$(".upper-canvas ").on("keydown", function(event){
    console.log("Hi");
});

JSFiddle Solution

Answer 2

尝试使用

<input id="text" type="text" onkeydown="myFunction1(event)"></div>
<div id="j"><input id="text" type="text"></div>
<script>
function myFunction1(ev) {console.log(ev);}
</script>

您也可以在W3schools阅读

Answer 3

您可以绑定keydown（或keyup）事件。然后使用event.ctrlKey属性检查是否按下了Control键，并使用event.key属性获取当前按下的键。如果两者都被按下，event.ctrlKey && event.key == 'h' 将是真的。

请注意，在事件处理程序结束时，我调用了event.preventDefault()。它阻止了默认操作，在这种情况下，浏览器的快捷方式Ctrl + H 被激活。

$("#k").on("keydown", function(event) {
  console.log(event.ctrlKey, event.key);
  
  if (event.ctrlKey && event.key == 'h') {
    alert("Ctrl + H pressed");
  }
  
  event.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="k"><input id="text" type="text"></div>
<div id="j"><input id="text" type="text"></div>