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

我有一个使用d3构建的交互式图形，并捕获退格键以从图形中移除元素。不过，我在页面上也有一个文本框，我希望能够在输入时使用退格键。有没有办法在文本框中允许退格，或者只在图表的主要svg中捕获退格？如何在捕获keydown事件时允许在文本框中退格

我的代码：

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/

来源

2017-10-17 Kyle Heuton

我可能会是非常愚蠢的在这里，但只是[未使用的preventDefault（https://jsfiddle.net/5pamrn3m/1/）似乎这样的伎俩 – TKoL

@TKoL没错，但他想当事件发生在输入和某些浏览器之外（大多数浏览器直到最近）时，将会导致默认情况下导致浏览器退回到上一页。 – Walk

我想我已经把网站设置为不让你离开而不保存，所以即使浏览器确实尝试发送回你也可能会工作。但是，Walk是正确的为什么它在那里 –

使用事件taget（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; 
}

来源

2017-10-17 14:09:46 dhilt

使用event.stopPropagation();

https://jsfiddle.net/x64hcktt/

来源

2017-10-17 14:12:51 Walk

可以防止整个页面上的退格键的默认行为，除了一定的投入，如果你检查专注元素的ID使用：

看到这个Fiddle

来源

2017-10-17 14:17:00

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

回答

相关问题