tab_trap

tab_trap

A jQuery plugin to overwrite the browsers default behaviour when pressing tab. While navigating through a form using the tab key the focus will not be set outside of the form ( e.g. the browsers url bar ).

Installation

Run npm install tab_trap from the root directory of your application.

Include jQuery on your page if you don't already have it.

<script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>

Include the plugin.

<script type="text/javascript" src="node_modules/tab_trap/jquery.tab_trap.js"></script>

Usage Examples

Simply call the plugins main function on the element(s) you want it applied to.

Apply to all form elements:

$( "form" ).trapTabs();

Apply to a specific element:

$( "#myForm" ).trapTabs();

In case you still want to do something with the keydown event of the Tab key there is the onTab callback option:

$( "form" ).trapTabs( {
  onTab: function() { console.log( "Tabbing out of: " + $( this ).attr( "id" ) ); }
} );