Turn off navigation using the arrow keys

Question

jQuery UI Tabs has this “function”, where if I press the up / left or right / right arrows, it switches tabs and loads this tab.

Typically, for horizontal tabs, users are more familiar with the fact that the up and down keys scroll the page and move the tabs. Is it possible to disable tab navigation only for up and down keys?

UPDATE

Based on Konstantin's suggestion, I tried the following code. It blocks the event when I press the up or down button right after clicking the binding tab. If I press another key, like the left / right keys, and then press the up / down keys again. It logs an event, but does not seem to stop propagating. Can an event fire from another element? Here is my code:

$('#tabs').keydown(function (event) { console.log("in tabs"); if (event.keyCode == 40 || event.keyCode == 38) { event.stopPropagation(); event.preventDefault(); return false; }; }); $('.ui-tabs-anchor').keydown(function (event) { console.log("in ui tabs anchor"); if (event.keyCode == 40 || event.keyCode == 38) { event.stopPropagation(); event.preventDefault(); return false; }; }); $('.ui-tabs-nav').keydown(function (event) { console.log("in ui tabs nav"); if (event.keyCode == 40 || event.keyCode == 38) { event.stopPropagation(); event.preventDefault(); return false; }; }); 

Answer 1

Locate the following code in the jQuery-UI file and comment out case $.ui.keyCode.DOWN: and case $.ui.keyCode.UP:

To a large extent, you will remove unwanted features in your source.

 _tabKeydown: function( event ) { var focusedTab = $( this.document[0].activeElement ).closest( "li" ), selectedIndex = this.tabs.index( focusedTab ), goingForward = true; if ( this._handlePageNav( event ) ) { return; } switch ( event.keyCode ) { case $.ui.keyCode.RIGHT: //IMPORTANT BIT case $.ui.keyCode.DOWN: selectedIndex++; break; //IMPORTANT BIT case $.ui.keyCode.UP: case $.ui.keyCode.LEFT: goingForward = false; selectedIndex--; break; case $.ui.keyCode.END: selectedIndex = this.anchors.length - 1; break; case $.ui.keyCode.HOME: selectedIndex = 0; break; case $.ui.keyCode.SPACE: // Activate only, no collapsing event.preventDefault(); clearTimeout( this.activating ); this._activate( selectedIndex ); return; case $.ui.keyCode.ENTER: // Toggle (cancel delayed activation, allow collapsing) event.preventDefault(); clearTimeout( this.activating ); // Determine if we should collapse or activate this._activate( selectedIndex === this.options.active ? false : selectedIndex ); return; default: return; } 

Answer 2

Yes, you can handle the keydown event and prevent it. It is attached to the ui-tabs anchor:

 $('.ui-tabs-anchor').keydown(function (event) { return false; }); 

Answer 3

You just had to do it yourself. This is what worked for me:

 $.widget("ui.tabs", $.ui.tabs, { _tabKeydown: function (event) { if (event.keyCode !== 38 && event.keyCode !== 40) { this._super(event); } } });