HOWTO · Angular
How to Set Focus on the Input Field in Angular
This tutorial demonstrates how to set the focus on the input field in Angular with an example.
On this page
To focus an input when it appears, use a custom directive that calls the DOM element’s focus() method after the form is shown. The example below uses AngularJS 1.x, the legacy framework; it is not an example for modern Angular. ng-model binds the input’s value to a model property, but does not focus the field or validate its contents.
Steps to Set Focus on the Input Field in Angular
A small stand-in makes the focus() call easy to see in isolation. This JavaScript illustration does not run AngularJS or a browser; the complete browser wiring follows.
Run this example:
const input = {
focused: false,
focus() {
this.focused = true;
}
};
input.focus();
console.log(`Focused: ${input.focused}`);
Focused: true
In AngularJS, register the directive on the same module as the controller, then add its focus-me attribute to the input. The click handler reveals the form and sets the focus trigger. A short $timeout lets AngularJS finish updating the view before the directive focuses the visible element.
The following standalone browser page includes the module, controller, directive, and markup. Replace the AngularJS script URL with a locally hosted copy if your application does not use the CDN. The page uses AngularJS 1.0.4 to match the version represented by the original example; this legacy version is shown for context, not recommended for a new application.
<!doctype html>
<html ng-app="focusDemo">
<head>
<meta charset="utf-8">
<title>AngularJS input focus</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js"></script>
<script>
var app = angular.module('focusDemo', []);
app.controller('DemoController', ['$scope', function($scope) {
$scope.showForm = false;
$scope.focusInput = false;
}]);
app.directive('focusMe', ['$timeout', function($timeout) {
return {
scope: { focusMe: '=' },
link: function(scope, element) {
scope.$watch('focusMe', function(value) {
if (value) {
$timeout(function() {
element[0].focus();
scope.focusMe = false;
});
}
});
}
};
}]);
</script>
</head>
<body ng-controller="DemoController">
<button type="button" ng-click="showForm = true; focusInput = true">
Show the form
</button>
<div ng-show="showForm">
<label for="name">Name</label>
<input id="name" type="text" ng-model="name" focus-me="focusInput">
<button type="button" ng-click="showForm = false">Done</button>
<p>The browser's focus indicator marks the active input.</p>
</div>
</body>
</html>
AngularJS normalizes the focus-me attribute to the directive name focusMe. Its isolate-scope property uses the same name as the attribute, and the = binding connects it to focusInput on the controller. When the button sets that value to true, the watcher schedules focus after the view update; then it resets the value so the action can be triggered again. The input must be visible and enabled for the browser to focus it. The browser draws the focus indicator according to its own styles, so its appearance can differ between browsers and themes.
Focus moves the keyboard cursor to the field; it does not confirm that a value is valid or prevent typing errors. Add AngularJS form validation separately when input rules are needed. ngBlur responds when an element loses focus, such as when the user tabs away; it is not needed to focus the input or to make focus leave it. This browser example has not been runtime-verified.
This pattern can reduce an extra click when a form appears and make the next typing target clear. Use automatic focus selectively: it can surprise keyboard and screen-reader users if it moves focus unexpectedly, especially in longer workflows. Keep a visible label, preserve a clear tab order, and let users move focus normally after the field receives it.
