Обнаружение клавиши ввода на элементе svg
Я пытаюсь сделать свой веб-сайт более доступным, сделав навигацию только с помощью ввода с клавиатуры. Для этого мне нужно иметь возможность перейти к динамически созданному элементу SVG, g, а затем нажать Enter, чтобы открыть модальное окно с дополнительной информацией.
Я могу определить, когда нажата любая клавиша, но конкретно не вводить. Я видел много людей, описывающих, как обнаружить нажатие клавиши ввода на элементе ввода, но это не решает мою проблему. Проблема, с которой я столкнулся, заключается в том, что myEvent - это обычное событие, а не событие клавиатуры. Так что у него нет кода ключа. Я также видел, что предлагается использовать myEvent.key или myEvent.what, которых у него также нет. Поэтому я не знаю, как получить информацию о том, какая клавиша была нажата.
Я не знаю, полезна ли эта информация, но мой веб-сайт представляет собой веб-приложение для просмотра дерева семейной истории, поэтому каждый элемент 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) {
// To this point everything works.
// The next line gives an error.
if (myEvent.keyCode === 13) { // 13 is enter
// Open my modal
}
});
он возвращает пустоту
1) Какой браузер вы используете для тестирования? 2) Пробовали ли вы вместо этого использовать keydown или keyup? (keypress обесценивается - developer.mozilla.org/en-US/docs/Web/API/Document/…) 3) Пробовали ли вы вместо этого использовать myEvent.key? (keycode амортизируется - developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode)
да, я пробовал keydown с myEvent.key, но все равно получаю сообщение об ошибке «Свойство 'key' не существует для типа 'Event'.ts(2339)"
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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.info(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);
Какую ошибку возвращает? Потому что я не вижу ничего плохого в этом коде.