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();
  }
});

但没有发生任何事情。您可以从我的小提琴 - http://jsfiddle.net/cwzjL2uw/5/中看到，您可以单击姓氏字段上的“标签”，并激活第一个样式选择菜单，但是再次单击“标签”则不会执行任何操作。如何从我的样式选择菜单中捕获按键事件？

Answer 1

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

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

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

然后您的代码可能符合您的期望。

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

以下是您可以查看的更新小提琴： JS Fiddle

另见：

当焦点在我的风格DIV上时，如何捕获按键？

1 个答案: