Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
This jQuery plugin is able to trap the keyboard input inside a DOM element
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
examples don't use 'prop' to be compatible with jQ < 1.6
lib add new examples with jquery 1.7.2
website remove unused syntax hilighting file
.gitignore add a gitignore file
LICENSE add the year 2012 to the LICENSE remove reference to IE9 because we don't have any problems in it, and… can also use sundown instead of upskirt, and don't replace the exampl… add a changelog show unminified size
jquery.trap.js bump up the version to 1.2.0
jquery.trap.min.js bump up the version to 1.2.0
package.json bump up the version to 1.2.0

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.


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>

        <script src=''></script>
        <script src='jquery.trap.min.js'></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.

    // on dom content ready
<div id='first'>
<a href=''>perdu</a>
<a href=''>google</a>
<a href=''>le monde</a>

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


<div id='third'>
<a href=''>perdu</a>
<a href=''>google</a>
<a href=''>le monde</a>




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

Something went wrong with that request. Please try again.