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

尝试使用

<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 2

解决了在＆＃34; .upper-canvas＆＃34;中添加tabindex 1的问题。（是的空白空间）元素然后绑定keydown在＆＃34; .upper-canvas＆＃34;用jQuery。

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 3

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

在DOM的某个元素中的Keydown事件

3 个答案: