A jQuery plugin to emulate tabbing between elements on a page.
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.
// 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);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.
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.
EmulateTab's only runtime dependencies is jQuery.
- 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.
Developed for PTS by Joel Purra http://joelpurra.se/
Copyright (c) 2011, 2012, The Swedish Post and Telecom Authority (PTS) All rights reserved.
Released under the BSD license.