Question

这与Fire event each time a DropDownList item is selected with jQuery和How to fire an dropdownlist event instantaneously?有关，但那里的答案并不能满足我的需要。

考虑到使用jQuery + JavaScript在HTML中进行下拉选择，并允许鼠标或键盘交互，我想编写一个代码，使得一个动作不仅会触发最终选择（''更改''事件），而且还会触发用户使用键盘向上箭头或向下箭头更改选择，而无需使用回车键确认选择。特别是，在选择颜色的下拉列表中，我想在用户向上或向下浏览选项时不断更改色板的颜色。

以下代码部分基于Fire event each time a DropDownList item is selected with jQuery的讨论，但是当使用键盘进行选择时，“获胜”版本不起作用，并且在Safari＆amp; amp;谷歌浏览器。我的代码在所有最新版本的Firefox中运行良好，它适用于Chrome和Safari中基于鼠标的操作;但是，在用户使用键盘的Chrome中，我似乎能够捕获的唯一事件是“更改”;为了它的价值，同样适用于Safari。

  (function($) {
      $.fn.dropdownSelect = function(fn) {
          return this.each(function() {
              // I'd expect this to be the normal case for selecting with mouse, but only seems to work in Firefox.    
              $('option', this).click(function() {
                  fn();
              });
              // Selection via arrow keys. Only seems to work in Firefox.  
              $(this).keyup(function() {
                  fn();
              });
              // Next case is crucial for Safari and Chrome, should be harmless for Firefox.
              $(this).change(function() {
                  fn();
              });
          });
      }
  })(jQuery);

然后我调用它：

$('#color-dropdown').dropdownSelect(function () {
     // Act on it here.
});

我也试过检查''按键''事件，但无济于事。有任何想法吗？

Answer 1

你想要'keydown'。按键事件不捕获箭头等控制功能。

即时启动下拉列表事件（理想情况下为jQuery）

1 个答案: