This jQuery plugin is able to trap the keyboard input inside a DOM element
JavaScript HTML Other
Latest commit 1f1c275 Jun 25, 2015 @julienw v1.2.1
Failed to load latest commit information.
examples don't use 'prop' to be compatible with jQ < 1.6 May 11, 2012
lib
website
.gitignore
LICENSE
README.md
bower.json
buildsite.sh
changelog.md
compress.sh
jquery.trap.js
jquery.trap.min.js bump up the version to 1.2.0 May 16, 2012
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