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

Question

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

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

是否有一种方法来防止默认的左右箭头键的选择?我已经尝试了e.p preventpropagation和e.p preventdefault，但似乎不起作用。

JSFIDDLE

Answer 1

我刚刚明白了。当我需要绑定到keydown事件时，我绑定到了keypress事件。当绑定到keydown时，你可以使用e.p preventdefault()。

JSFIDDLE解

Answer 2

由于OP的解决方案在Firefox中不起作用，因此我为Firefox中已知的错误创建了一个解决方案。基本上，event.preventDefault不能阻止←和→在Firefox的<select>节点上。

这就是实际的解决方法

关于这方面的更多信息，请参阅我对类似问题的详细回答

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

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