任务是使用箭头键而不是TAB/TAB+SHIFT在下拉列表中导航。其中一个想法是替换箭头键的向下事件以模拟TAB/TAB+SHIFT键向下事件。 我的方法归结为以下代码,成功阻止了默认的箭头键事件并触发了显示警报的TAB键代码。
不幸的是,它没有将突出显示移动到所需的列表项,并且除了在文档上触发TAB键事件外什么也没有发生。
有任何想法为什么它不起作用吗?
不幸的是,它没有将突出显示移动到所需的列表项,并且除了在文档上触发TAB键事件外什么也没有发生。
有任何想法为什么它不起作用吗?
handleKeyDown = (e) => {
let element = e.currentTarget;
switch (e.keyCode) {
case 40:
e.preventDefault();
const event = new KeyboardEvent("keydown", { view: window, bubbles: true, cancelable: true, keyCode: 9, shiftKey: false });
element.dispatchEvent(event);
break;
}
switch (e.keyCode) {
case 38:
e.preventDefault();
const event = new KeyboardEvent("keydown", { view: window, bubbles: true, cancelable: true, keyCode: 9, shiftKey: true });
element.dispatchEvent(event);
break;
}
// the switch case 9 is only used for debugging purposes
switch (e.keyCode) {
case 9:
e.preventDefault();
alert ("You pressed the 'TAB' key!");
break;
}
<Popover onKeyDown={this.handleKeyDown}>
switch (e.keycode) { case 40: // 代码\n case 38: // 代码\n case 9: // 代码\n }
- Udaya Prakash