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

Posted 2021-03-28

我有一个用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/

答案

使用事件目标（qazxsw poi）检查是否能够破坏程序的qazxsw poi：

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

有关事件传播的更多信息：event.stopPropagation();

另一答案

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

https://jsfiddle.net/x64hcktt/

看到这个https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Examples#Example_5:_Event_Propagation

另一答案

这是另一种方法：

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

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