Traps keyboard focus cycle within element's interactive children.
npm install jquery-keyboard-trapATTENTION: 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.
``js`
$.trapKeyboard(containerEl, options);
$.untrapKeyboard();
For best results, app developer should ensure a descendant of the container element
already has keyboard focus before activating this plugin.
`js`
npm install jquery-keyboard-trap
HTML structure for a typical dialog, in visible state, with close, cancel & okay focusable elements:
`html`
Notifications
Focus on an element then execute plugin:
`js`
$('#dialog_close').focus();
$.trapKeyboard('[role=dialog]');
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 trappedkeyboardUntrap
* - keyboard has been untrapped
None.
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.
Run npm start for test driven development. All tests are located in test.js.
Execute npm run to view all available CLI scripts:
* npm start test driven development: watches code and re-tests after any changenpm test
* runs tests & generates reports (see reports section below)npm run lint
* lints code for syntax and style using eslintnpm run fixstyle
* attempts to auto fix style errors using eslintnpm run minify
* builds minified version of codenpm run jsdoc
* generates jsdocsnpm run build
* minifies code and generates jsdocsnpm run clean
* deletes all generated files
The following hooks exist, and do not need to be invoked manually:
* npm prepublish cleans, lints, tests and builds on every npm publish commandpre-commit
* cleans, lints, tests and builds on every git commit command
Each test run will generate the following reports:
* /test_reports/coverage contains Istanbul code coverage report/test_reports/html
* contains HTML test report/test_reports/junit
* contains JUnit test report
JSDocs are generated under ./jsdoc` folder.
https://travis-ci.org/makeup-jquery/jquery-keyboard-trap
https://coveralls.io/github/makeup-jquery/jquery-keyboard-trap?branch=master