Question

我试图通过仅使用键盘输入进行导航来使我的网站更易于访问。为此，我需要能够制表到动态创建的SVG元素g，然后按Enter打开具有更多信息的模态。

我可以检测到何时按下了任何键，但没有明确输入。我见过很多人描述如何检测输入元素上的Enter键，但这不能解决我的问题。我遇到的问题是myEvent只是一个普通事件，而不是键盘事件。因此，它没有键码。我也看到它建议使用myEvent.key或myEvent.which，它也没有。所以我不知道如何获得按下了什么键的信息。

我不知道此信息是否有用，但是我的网站是查看家族史的Web应用程序，因此每个SVG元素都是树中节点的直观表示。我试图在每个节点上使用Tab键显示，并在按Enter键时显示有关焦点节点人员的更多信息。

 var g:Element = document.createElementNS("http://www.w3.org/2000/svg", "g");

 g.setAttribute('tabindex', "0"); // So I can tab to the element

 g.addEventListener("keypress",  function (myEvent) {
      // To this point everything works.

      // The next line gives an error.
      if(myEvent.keyCode === 13) { // 13 is enter
           // Open my modal
      }
 });

Answer 1

尝试进行投射。

var container:Element = document.createElement("div");
var svg:Element = document.createElementNS("http://www.w3.org/2000/svg", "svg");

 var g:Element = document.createElementNS("http://www.w3.org/2000/svg", "g");

 g.setAttribute('tabindex', "0"); // So I can tab to the element

 g.addEventListener("keypress",  function (myEvent:KeyboardEvent) {
      // To this point everything works.
      
     console.log(myEvent);
      // The next line gives an error.
      if(myEvent.keyCode === 13) { // 13 is enter
          alert('enter');
      }
 });

var circle:Element = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circle.setAttribute("cx", "20");
circle.setAttribute("cy", "20");
circle.setAttribute("r", "15");

g.appendChild(circle);
svg.appendChild(g);
container.appendChild(svg);
document.body.appendChild(container);

在svg元素上检测回车键

1 个答案: