如何在捕获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/
答
使用事件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;
}
我可能会是非常愚蠢的在这里,但只是[未使用的preventDefault(https://jsfiddle.net/5pamrn3m/1/)似乎这样的伎俩 – TKoL
@TKoL没错,但他想当事件发生在输入和某些浏览器之外(大多数浏览器直到最近)时,将会导致默认情况下导致浏览器退回到上一页。 – Walk
我想我已经把网站设置为不让你离开而不保存,所以即使浏览器确实尝试发送回你也可能会工作。但是,Walk是正确的为什么它在那里 –