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

Question

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

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/ 中看到，您可以在姓氏字段上单击“制表符”并激活第一个样式 select 菜单，然后再次单击“制表符”时间什么都不做。如何从我的样式 select 菜单中捕获按键事件？

Answer 1

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

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

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

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

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

这是更新后的 fiddle 您可以查看： JS Fiddle

另请参阅：

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

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

How do I capture a keypress when focus is on my styled DIV?

html

css

jquery

jquery-ui

keypress