DOM 的某个元素中的 Keydown 事件

Posted 2023-03-17

【中文标题】DOM 的某个元素中的 Keydown 事件

【英文标题】：Keydown event in a certain element of the DOM

【发布时间】：2018-09-23 11:03:35

【问题描述】：

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

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

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

【问题讨论】：

我知道如何在 JQuery 中使用事件按键，我已经编写了代码，但我的问题是 Ctrl+C

问题是我已经为 Canvas 定义了一个自定义的 Ctrl + V，并且我在 Document 中收集了这个事件。然后，假设我在浏览器的链接栏中执行 Ctrl + C 以复制 url，但在我在画布上执行 Ctrl + C 之前。当我转到 Ctrl + V 时，它会执行我的复制功能和 windows native

我明白了，我会更新我的答案。

【参考方案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

【参考方案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阅读

【参考方案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>

【讨论】：

@PedroJose 那么会发生什么呢？当我专注于文本框并按Ctrl + H 时，我会在浏览器中收到警报。您的浏览器不会出现这种情况吗？

没有发生任何事情，我有相同的代码，但 Id 不同，里面有一个 console.log，控制台现在确实显示在开发工具上......但不适用于我的自己的代码，你的例子工作正常

@PedroJose 你能创建一个工作的sn-p（通过编辑问题）重现那个问题吗？我看看能不能找到问题。或者，如果您对 JS Fiddle 或 Codepen 感到满意，那也没关系。

好的，我按照自己的方式创建了小提琴，但它不起作用 XD fiddle

@PedroJose 我想知道问题是否是因为画布元素不允许按键事件。您可以尝试收听文档元素上的事件，然后如果它实际上是Ctrl + V，您可以执行特定于该事件的逻辑。所以事件绑定是：$(document).on("keydown", function...