如何在捕获 keydown 事件时在文本框中允许退格答案

【问题标题】：How do I allow backspace in a textbox while capturing keydown events如何在捕获 keydown 事件时在文本框中允许退格
【发布时间】：2017-10-17 14:06:24
【问题描述】：

我有一个使用 d3 构建的交互式图表，我捕获了退格键以从图表中删除元素。但是，我在页面上也有一个文本框，我希望能够在打字时使用退格键。有没有办法在文本框中允许退格，或者只在图形的主 svg 中捕获它？

我的代码：

var BACKSPACE_KEY = 8;

d3.select(window).on("keydown", function() {
  switch (d3.event.keyCode) {
    case BACKSPACE_KEY:
      // So that the browser doesn't go back
      d3.event.preventDefault();

      // Clean up my graph with the backspace key
      // ...
  }
})

演示问题的小提琴：https://jsfiddle.net/5pamrn3m/

【问题讨论】：

我在这里可能很愚蠢，但 not using preventDefault 似乎可以解决问题
@TKoL 是的，但是当事件发生在输入之外并且在某些浏览器中（直到最近在大多数浏览器中）退格将浏览器导航到上一页时，他想阻止默认。
我想我已经将网站设置为不让您离开而不保存，因此即使浏览器确实尝试将您送回，这也可能有效。但是，是的，Walk 关于它存在的原因是正确的

标签： javascript d3.js

【解决方案1】：

使用事件标记 (MDN) 检查是否是 <input> 才能中断该过程：

var BACKSPACE_KEY = 8;

d3.select(window).on("keydown", function() {
  switch (d3.event.keyCode) {
    case BACKSPACE_KEY:

      // So that the browser doesn't go back
      d3.event.preventDefault();

      // BACKSPACE_KEY was fired in <input id="textbox">
      if(d3.event.target.id === 'textbox') {
        break;
      }    

      // Clean up my graph with the backspace key
      // ...
  }
})

由于您的小提琴，我使用了id，但条件可能更通用

// BACKSPACE_KEY was fired in any <input>
if(d3.event.target.nodeName.toLowerCase() === 'input') {
  break;
}

【讨论】：

【解决方案2】：

使用event.stopPropagation();

https://jsfiddle.net/x64hcktt/

【讨论】：

【解决方案3】：

如果您使用以下方法检查焦点元素的 id，则可以在整个页面上阻止退格键的默认行为，除了某个输入：

if (document.activeElement.id !== "textbox")
    d3.event.preventDefault();

看到这个Fiddle

【讨论】：

【解决方案4】：

这是另一种方法：

d3.select('input').on('keydown', () => d3.event.stopPropagation())

这会阻止 keydown 事件传播到其他处理程序。

【讨论】：