在选择中阻止向右/向左箭头导航

Question

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

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

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

JSFIDDLE

Answer 1

我只是想通了。当我需要绑定到keydown事件时，我绑定了keypress事件。绑定到keydown时，您可以使用e.preventDefault（）。

JSFIDDLE SOLUTION

Answer 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

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

唯一不方便的是＆＃34;改变＆＃34;事件被触发两次，因此您的应用可能会照顾到这一点。