Skip to content
This jQuery plugin is able to trap the keyboard input inside a DOM element
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples
lib
website
.gitignore
LICENSE
README.md
bower.json
buildsite.sh
changelog.md
compress.sh
jquery.trap.js
jquery.trap.min.js
jshint.sh
package.json

README.md

jQuery trap input plugin

The jQuery trap input plugin implements input trapping as described by the Web Accessibility Initiative.

Why this is useful

As explained in the W3C document aria-practices in the WAI, modal dialogs should trap the keyboard input.

This means that when a user navigates in the dialog using the tab key (with or without shift), the focus should not go outside of the dialog.

jQuery UI Dialog implements this when the dialog is modal, in a limited way, but I found this in no other libraries.

This implementation is better than the one is jQuery UI Dialog: faster, it works with tabIndex attributes (see the dialog example), and it works with other browsers than Firefox.

This library does not work with usemaps for now.

I think it is a must for the accessibility of our rich web pages, so I made this plugin because I thought at first that jQuery UI didn't implement this.

Usage

Include jQuery and this plugin. Then, call the trap function on the element which should trap the tabbing.

Here is a simple example

<!doctype html>

<html>
	<head>
		<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'></script>
		<script src='jquery.trap.min.js'></script>
	<script>
	function init() {
		/* this is the init function
		 *we find all elements with the "trap" class and we call the
		 * "trap" function on it.
		 * Yes, this is _that_ simple.
		 */
		$(".trap").trap();
	}
	
	// on dom content ready
	$(init);
	</script>
	</head>
<body>
<div id='first'>
<a href='http://perdu.com'>perdu</a>
<a href='http://google.fr'>google</a>
<a href='http://lemonde.fr'>le monde</a>

</div>
<!-- once the focus get inside, it will be trapped -->
<div id='second' class='trap'>
<a href='http://perdu.com'>perdu</a>
<a href='http://google.fr'>google</a>
<a href='http://lemonde.fr'>le monde</a>

</div>

<div id='third'>
<a href='http://perdu.com'>perdu</a>
<a href='http://google.fr'>google</a>
<a href='http://lemonde.fr'>le monde</a>

</div>

</body>

</html>

See the examples directory for some more examples.

Known problems

Version 1.1.0 had problems with IE6 and IE7 which got fixed in version 1.2.0

We don't support Opera's navigation shortcuts.

Useful links

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.