在D3.js中检测按键输入

Question

我已经阅读了许多帖子和答案，但它们似乎都过时了。

我的目标是能够通过“tab”键浏览文本，并在按下回车和/或空格键时运行一个函数。我尝试了 keyCode、charCode、key、which、keypress、keyup 和 keydown 等。

我有一个可以通过 tab 键浏览的文本节点：

.attr('role', 'button')
.attr('tabindex', '0')
.attr('focusable', 'true')
.on('click', sel)
.on('keypress', function(){if(key == 13 || key == 32){return sel}}) 

点击事件和标签都正常，唯独当使用空格和回车时函数无法被调用。

感激不尽，期待您的帮助。

- Brad

Answer 1

你需要使用 d3.event.keyCode。根据API，d3.event...：

...在事件监听器被调用期间设置，并在监听器终止后重置。使用它来访问标准事件字段。

下面是一个基本的演示。点击 "foo"、"bar" 或 "baz" 进行聚焦，然后按任意键查看控制台：

var body = d3.select("body");
var p = body.selectAll(null)
  .data(["foo", "bar", "baz"])
  .enter()
  .append("p")
  .attr('tabindex', '0')
  .attr('focusable', 'true')
  .html(String)
  .on("keypress", function() {
    if(d3.event.keyCode === 32 || d3.event.keyCode === 13){
    console.log("Congrats, you pressed enter or space!")
    }
  })

<script src="https://d3js.org/d3.v4.min.js"></script>

- Gerardo Furtado