emulate tab

Tries to emulate a tab key press of a real user.

Ever triggered the tab-key-event by javascript? Tab is usually handled by browser and will not get handle if you trigger the event by javascript. This is for security resons to prevent a script to tab e.g. into the browser's menu or into another frame or dev-tools ...
This script has an heuristic to find the next element to stop. It will trigger the keypress-Event and blur event on the active element and the focus-Event on the next element.

Interactive demo: https://emulate-tab.net-root.de

Installation

npm i emulate-tab
or download unpackaged javascript files from our releases

Usage

typescript

import { emulateTab } from 'emulate-tab';

emulateTab();
emulateTab.backwards();

-> complete angular material example project

javascript

<script src="emulate-tab.min.js">
<script>
  emulateTab();
  emulateTab.backwards();
</script>

-> complete plain html example project

Dependencies

none.

Browser compatibility:

Automated tests for current Chrome and Firefox by github actions:

License:

MIT License

changes

1.2.0

• simplify API use sync calls instead of async and remove triplicated methods

1.1.3

• fix security alerts from dev dependencies

1.1.2

• fix amd bundle
• adjust new api variant emulateTab.forward() to emulateTab.forwards()

1.1.1

• fix double focus events

1.1.0

• emulateTab now selects existing input field content
• added bundle packages for plain html integration
• sample for plain html js integration

1.0.1

• improved sample and tests
• added missing events before and after tab "keydown"