防止选择中的右/左箭头导航答案

【问题标题】：Prevent right/left arrow navigation in select防止选择中的右/左箭头导航
【发布时间】：2011-12-20 17:20:52
【问题描述】：

我有 3 个选择，我正在启用键盘导航（左右箭头键）在它们之间移动。按向右或向左箭头键时的默认行为是向上/向下移动列表。

我的解决方案可以在选择之间移动，但每次您移动到新选择时，您刚从中移动的选择中的选定值会根据您按下的箭头向上或向下移动。

有没有办法阻止选择的默认左右箭头键？我已经尝试过 e.preventPropagation 和 e.preventDefault 但这似乎不起作用。

JSFIDDLE

【问题讨论】：

Uncaught ReferenceError: mojarra is not defined，由于您使用的是 jQuery，因此请使用 blur() 并且不要使用内联 javascript..
@Neal mojarra 内联是剩余的，我已将其删除。问题仍然存在。
我真的想通了。我绑定到按键而不是按键。我将在 7 小时内重新发布此评论作为答案。 JSFIDDLE SOLUTION

标签： javascript jquery html

【解决方案1】：

我刚刚想通了。当我需要绑定到 keydown 事件时，我正在绑定到 keypress 事件。绑定到 keydown 时，您可以使用 e.preventDefault()。

JSFIDDLE SOLUTION

【讨论】：

你是对的，如果我有时间我会玩弄它。
@Haroldo_OK see my workaround below.

【解决方案2】：

由于 OP's solution 在 Firefox 中不起作用，我为 known bug in Firefox 创建了一个解决方法。基本上，event.preventDefault 不会阻止 Firefox 中 <select> 节点上的 ← 和 →。

So here's the workaround in action.

有关这方面的更多信息，请参阅my detailed answer on similar question

【讨论】：

【解决方案3】：

没有办法让它在 Firefox 中工作以防止事件默认......而且 Ruud 的解决方案太复杂了。所以我基于同样的想法实现了这个简单而干净的解决方案：

$('select').on('keydown', function( e ){
    switch(e.keyCode) { 
       // User pressed "left" or "right" arrow
       case 37:
       case 39:
           var val = $(this).val();
           var $slt = $(this).one('change', function(){
               $slt.val( val ).change();
           });
       break;
    }
});

唯一不方便的是“change”事件被触发了两次，所以你的应用程序可能会注意这一点。

【讨论】：