javascript - 如何触发tab键按钮事件？

Question

如果您看到下面所附的图片。鼠标悬停时国家/地区名称样式会发生变化。但是当我单击向下箭头键时，我们必须显示相同的行为。 有人可以告诉我该怎么做吗？

Answer 1

想法是绑定(bind) keydown 事件，如果键是向下箭头 - 您应该选择列表中的下一个。您必须拥有当前选择的索引并使用它突出显示菜单项。当鼠标悬停事件发生时，只需将当前选择索引更改为悬停项目即可。使用索引更改背景颜色。使用 ReactJs 和类似的 UI 框架非常容易，使用 jQuery 则有点困惑，但如果你有这个想法，希望你会成功。

2 个应该有帮助的代码片段:

$(document).keydown(function(e) {
    switch(e.which) {
        case 37: // left
        break;

        case 38: // up
        break;

        case 39: // right
        break;

        case 40: // down
        break;

        default: return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
});

$('.tg').bind('keypress', function(event) {
  if(event.which === 13) { // tab
    $(this).next().focus();
  }
});

来源: -Simulate pressing tab key with jQuery -Binding arrow keys in JS/jQuery

我有一个演示仓库，我用 ReactJs 做了类似的事情 https://github.com/liesislukas/react-dropdown-autocomplete-with-search