jQuery Plugin to Retrieve All Tabbable Elements - Tabbable

File Size: 96KB
Views Total: 785
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin to Retrieve All Tabbable Elements - Tabbable

Tabbable is a simple jQuery plugin that allows you to set focus on any element of your page when you use tab key.

How to use it:

1. Download and include jQuery library and Tabbable.js on your web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="src/jquery.tabbable.js"></script>

2. Markup

<form>
<label>Name</label>
<input type="text" name="name" />
<label>Surname</label>
<input type="text" name="surname" />
<a>Reset</a> <a href="/">Cancel</a>
<button>Submit</button>
</form>

3. Call the jQuery Tabbable plugin, returns all tabbable elements

<script>
jQuery(function($) {
  $('form').find(':tabbable'); // [ 'input', 'input', 'a[href]', 'button' ]
});
</script>

This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.