Обнаружение клавиши ввода на элементе SVG

Question

Я пытаюсь сделать свой веб-сайт более доступным, делая навигацию только с клавиатуры. Для этого мне нужно иметь возможность перейти к динамически созданному SVG-элементу g, а затем нажать клавишу ввода, чтобы открыть модальное окно с дополнительной информацией.

Я могу определить, когда нажата любая клавиша, но не вводить ее. Я видел много людей, описывающих, как обнаружить нажатие клавиши ввода на элементе ввода, но это не решает мою проблему. Проблема, с которой я столкнулся, заключается в том, что myEvent - это обычное событие, а не событие клавиатуры. Так что у него нет ключевого кода. Я также видел, что он предложил использовать myEvent.key или myEvent.which, которого он также не имеет. Поэтому я не знаю, как получить информацию о том, какая клавиша была нажата.

Не знаю, эта информация полезна, но мой веб-сайт - это веб-приложение для просмотра дерева семейной истории, поэтому каждый элемент SVG является визуальным представлением узла в дереве. Я пытаюсь переключаться между каждым узлом и отображать больше информации о человеке в фокусированном узле при нажатии 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);