Question

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

我的目标是能够选择＆＃34; tab＆＃34;通过文本并在输入和/或空格键上运行一个函数。我尝试了keyCode，charCode，key，which，keypress，keyup，keydown等等。

我有一个文本节点，我可以使用以下标签：

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

点击是完美的，标签可以正常工作，只有在使用空格和输入时才会调用该功能。

感谢任何帮助。

Answer 1

您必须使用d3.event.keyCode。根据{{3}}，d3.event ...：

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

这是一个基本的演示。点击＆＃34; foo＆＃34;，＆＃34; bar＆＃34;或＆＃34; baz＆＃34;要集中注意力，然后按任意键并查看控制台：

＆＃13;

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!")
    }
  })

＆＃13;

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

＆＃13;

检测D3.js中的按键

1 个答案: