当焦点位于我的样式 DIV 上时，如何捕获按键？

Question

我使用的是 jQuery 1.12。我的页面上有几个样式化的选择菜单。当一个处于活动状态时，我希望能够按“Tab”，然后将焦点转移到下一个样式选择菜单。我正在尝试这个

return $('div.select-styled:first').keydown(function(e) {
  alert("key pressed");
  if (e.which === 9) {
    $('div.select-styled.active').each(function() {
      return $(this).removeClass('active').next('ul.select-options').hide();
    });
    return $('div.select-styled:second').focus().click();
  }
});

但什么也没发生。您可以从我的 Fiddle — http://jsfiddle.net/cwzjL2uw/5/ 中看到，您可以在姓氏字段上单击“Tab”，然后激活第一个样式选择菜单，但再次单击“Tab”则无济于事。如何从我的样式选择菜单中捕获按键事件？

Answer 1

样式化的 select 元素是通过 div 元素实现的，除非它具有 tabindex 属性，否则无法获得焦点。如果您希望元素变得可聚焦，可以将 tabindex 设置为 -1。

对于您的代码，wrapper 可以设置为：

var $wrapper = $("<div />", {
  'class': "select",
  'tabindex': '-1'
})

那么您的代码可能会按您的预期工作。

但是，tab焦点已经是borwser提供的一个基本功能，这意味着你应该监听而不是监听tab键事件 到focus 和blur 事件并更新您的控件的表示。在这种情况下，您应该将tabindex 设置为1，并添加事件处理程序。 然后你可以移除keydown事件监听器以及body上的监听器来检测失去焦点。

这是您可以检查的更新小提琴： JS Fiddle

另见：

• Which HTML elements can receive focus?
• Some best practice about tabindex