tab-goto

Control where tab or shift+tab goto .

Installation

npm:

npm install tab-goto

Yarn:

yarn add tab-goto

Usage

You can set any CSS Selector to tab-goto or shift-tab-goto attribute to control where tab or shift+tab goto. We use querySelector() internally to find the element to focus.

CDN:

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

<input class="my-input" tab-goto="#my-div" />
<button my-button tab-goto=".my-input" shift-tab-goto='[my-data="div1"]'>
  my button
</button>
<div id="my-div" my-data="div1" tab-goto="[my-button]" tabindex="0">my-div</div>

ESM:

import "tab-goto";

API

config(options)

The config() method is used to configure tab goto uses attribute names and enable/disable tab goto.

Example

CDN:

<input class="my-input" my-tab-goto="#my-div" />
<button my-button my-tab-goto=".my-input" my-shift-tab-goto='[my-data="div1"]'>
  my button
</button>
<div id="my-div" my-data="div1" my-tab-goto="[my-button]" tabindex="0">
  my-div
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
  window.tabGoto.config({
    tabGotoName: "my-tab-goto",
    shiftTabGotoName: "my-shift-tab-goto",
    enableTabGoto: true,
    enableShiftTabGoto: true,
  });
</script>

ESM:

import { config as configTabGoto } from "tab-goto";

configTabGoto({
  tabGotoName: "my-tab-goto",
  shiftTabGotoName: "my-shift-tab-goto",
  enableTabGoto: true,
  enableShiftTabGoto: true,
});

Parameters

• options (Object) - The options object.
  • tabGotoName (string) - The attribute name of tab goto. Default: tab-goto.
  • shiftTabGotoName (string) - The attribute name of shift tab goto. Default: shift-tab-goto.
  • enableTabGoto (boolean) - Whether enable tab goto. Default: true.
  • enableShiftTabGoto (boolean) - Whether enable shift tab goto. Default: true.

Release Notes