EmulateTab javascript library
A jQuery plugin to emulate tabbing between elements on a page.
⚠️ This project has been archivedNo future updates are planned. Feel free to continue using it, but expect no support.
The tab key is very useful when it comes to navigating webpages. When working with functions that modify or reuse tabbing through elements on a page, the browser's native tabbing logic cannot be called from javascript. This plugin tries to emulate/simulate that browser logic.
Get it
Download the script, and include it in your HTML page after the jQuery script tag.
| Link | Note |
|---|---|
| emulatetab.joelpurra.js | For development |
| emulatetab.joelpurra.min.js | For production |
| Github | $ git clone --recursive git://github.com/joelpurra/emulatetab.git Make sure to get the submodules too. |
| Bower | $ bower install jquery-emulatetab |
| Component | $ component install joelpurra/emulatetab |
| NPM | $ npm install jquery-emulatetab |
| jQuery Plugin Registry | |
| Packagist |
Demos
example/demo.html: Simple demo for comparing EmulateTab to your browser.
Usage
// Emulate forward tab from the currently focused element
$.emulateTab();
// Emulate reverse tab from the currently focused element
$.emulateTab(-1);
// Emulate forward tab from a specific element
$(selector).emulateTab();
// Emulate reverse tab from a specific element
$(selector).emulateTab(-1);Tabbable elements
Elements that can be focused/tabbed include <input>, <select>, <textarea>, <button> and <a href="..."> (the href attribute must exist and the tag must have some contents).
Note that <input type="hidden" />, <a> (without href or empty contents), disabled="disabled" or display: none; elements cannot be focused/tabbed to.
Original purpose
Developed to as a part of two other plugins; one to use tab to skip over less used form fields, the other to use the + on the keypad as a new tab key. Both plugins were used in a web application for registering and administering letters.
Dependencies
EmulateTab's only runtime dependencies is jQuery.
Browser compatibility
Should be about as compatible as jQuery is, since most functions depend on jQuery's normalization. You are engouraged to run the EmulateTab test suite and then report any issues.
Contribute
In order to contribute to the project, follow these steps.
- Make sure you have installed git, npm, bower, grunt, jekyll.
- Fork the project on github.
$ git clone --recursive [email protected]:USERNAME/emulatetab.gitwhereUSERNAMEis your github username.$ git checkout -b my-own-modificationwheremy-own-modificationis a descriptive name for your fix or feature.$ npm install && bower install$ grunt watch- Make your changes to the code. Remember to write new test cases for your changes.
$ git commit$ gruntto make sure all tests pass.$ git push- Send a pull request on github.com.
Todo
- jQuery UI has better code for
:focusable/:tabbable. Investigate how to implement it. - Investigate focusing/tabbing and
[contenteditable]. - Investigate focusing/tabbing non-input elements with
[tabindex]and negative values value. - Create a separate git repo for packaged/minified bower/composer/component/jquery plugin releases.
License
Developed for PTS by Joel Purra https://joelpurra.se/
Copyright (c) 2011, 2012, 2013, 2014, 2015, The Swedish Post and Telecom Authority (PTS) All rights reserved.
Released under the BSD license.