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="/?originalUrl=https%3A%2F%2Fatesgoral.github.io%2F%26quot%3Bpath%2Fto%2Fangular.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%26lt%3Bscript%2520src%3D%26quot%3Bpath%2Fto%2Fangular-tab-trap.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%253C!--%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520--">

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