Prevent Right/left Arrow Navigation In Select

I have 3 selects that I am enabling keyboard navigation(right and left arrow keys) to move between them. The default behavior when pressing the right or left arrow key is to move u

Solution 1:

I just figured it out. I was binding to keypress event, when I needed to bind to the keydown event. When binding to keydown then you can use e.preventDefault().

JSFIDDLE SOLUTION

Solution 2:

Since OP's solution does not work in Firefox, I created a workaround for the known bug in Firefox. Basically event.preventDefault doesn't prevent ← and → on <select> nodes in Firefox.

So here's the workaround in action.

For more information on this, see my detailed answer on similar question

Solution 3:

No way to get it work in Firefox preventing event default.... And Ruud solution is too complicated. So I've implemented that simple and clean solution, based on the same idea:

$('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;
    }
});

The only inconvenient is that "change" event is triggered twice, so you're app may take care about that.