angular-auto-focus

Live Demo

Click the Toggle button to toggle the rendering of the input element.

Demo Source

<button ng-init="render = true" ng-click="render = !render">
    Toggle
</button>
<input ng-if="render" auto-focus>

Overview

The HTML autofocus attribute doesn't consistently work across different browsers when an element is inserted into the DOM after the initial page load. angular-auto-focus introduces the auto-focus attribute that works consistently.

Download

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

Via Bower

bower install angular-auto-focus

Via NPM

npm install angular-auto-focus

Usage

Include angular-auto-focus.js in your application, after Angular is included.

<script src="path/to/angular.js"></script>
<script src="path/to/angular-auto-focus.js"></script>

You may use an AMD or CommonJS loader as well.

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

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

Then use the auto-focus attribute to give focus to any focusable element, such as an input element:

<label>Username <input name="username" auto-focus></label>
<label>Password <input type="password" name="password"></label>

You can also you use it with any element with a tabindex attribute:

<div class="dialog" tabindex="0" auto-focus>
</div>

License

MIT