angular-tab-trap

Username Password

Live Demo

Tab through the elements. You can't tab out of the <tab-trap> element.

Demo Source

<tab-trap>
    <label>
        Username
        <input type="text" autofocus>
    </label>
    <label>
        Password
        <input type="password">
    </label>
    <button>Sign in</button>
</tab-trap>

Overview

angular-tab-trap disallows tabbing out of a designated area. This is especially useful when implementing modal dialogs to prevent the user from interacting with what's behind a dialog / modal mask by simply tabbing out of the dialog.

Download

Grab the latest from GitHub or use your favorite package manager:

Via Bower

bower install angular-tab-trap

Via NPM

npm install angular-tab-trap

Usage

Include angular-tab-trap.js in your application, after Angular is included.

<script src="path/to/angular.js"></script>
<script src="path/to/angular-tab-trap.js"></script>

You may use an AMD or CommonJS loader as well.

Initialize your Angular application with the mp.tabTrap module as a dependency:

angular.module('app', [ 'mp.tabTrap' ]);

Then use the <tab-trap> element:

<tab-trap>
</tab-trap>

License

MIT