ATTENTION: A non-jQuery version is now available at makeup-keyboard-trap.
Establishes a keyboard tab-loop using the interactive descendants of given container element. Or, in other words, it traps keyboard focus inside the given container element.
For best results, app developer should ensure a descendant of the container element already has keyboard focus before activating this plugin.
npm install jquery-keyboard-trap
HTML structure for a typical dialog, in visible state, with close, cancel & okay focusable elements:
Notifications<!-- dialog body content would go here -->CancelOk
Focus on an element then execute plugin:
The plugin has now created a tab loop using all focusable elements inside the dialog; keyboard focus is now trapped inside the dialog.
keyboardTrap- keyboard has been trapped
keyboardUntrap- keyboard has been untrapped
Keyboard-trap is a singleton as there can only ever be one active keyboard-trap on a page. Creating a new keyboard-trap will disable the current trap.
npm start for test driven development. All tests are located in
npm run to view all available CLI scripts:
npm starttest driven development: watches code and re-tests after any change
npm testruns tests & generates reports (see reports section below)
npm run lintlints code for syntax and style using eslint
npm run fixstyleattempts to auto fix style errors using eslint
npm run minifybuilds minified version of code
npm run jsdocgenerates jsdocs
npm run buildminifies code and generates jsdocs
npm run cleandeletes all generated files
The following hooks exist, and do not need to be invoked manually:
npm prepublishcleans, lints, tests and builds on every
pre-commitcleans, lints, tests and builds on every
Each test run will generate the following reports:
/test_reports/coveragecontains Istanbul code coverage report
/test_reports/htmlcontains HTML test report
/test_reports/junitcontains JUnit test report
JSDocs are generated under