How to set focus on input field in AngularJS?

Revati S Misra 602 17 Jun 2024

How to set focus on the input field in AngularJS form?

Revati S Misra

Student

Skilled in SEO, content writing, and digital marketing. Completed several years of working in many organizations including multinational companies. I love to learn new things in life that keep me motivated.

1 Answers

Ashutosh Patel 17 Jun 2024

Set focus on input field

In AngularJS, you can set the focus to the input field programmatically or directly in your controller's logic through a directive. Here’s how you can do this.

Using a Directive (recommended method)

Define a Directive
Create a custom directive to control set focus on each element.

var app = angular.module("myApp", []);
// create custom directive "focusMe"
app.directive('focusMe', function($timeout) {
    return {
        link: function(scope, element, attrs) {
        scope.$watch(attrs.focusMe, function(value) {
            if (value === true) {
            $timeout(function() {
                element[0].focus();
            });
            }
        });
        }
    };
})

Apply the Directive in HTML
Apply the focusMe directive to your input field. The instruction requires a scope variable (focusInput) and will set focus on the element when the variable is true.

<input type="text" ng-model="inputValue" focus-me="focusInput">

Set Focus in Controller
In your controller, set the focusInput variable to true to trigger focus on the input field.

app.controller('MyController', function($scope) {
    // by default focus in value 'true' of input field
    $scope.focusInput = true;
});

Example-

<!DOCTYPE html>
<html data-ng-app="myApp">

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Focus input field Example</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>

<body>
    <div data-ng-controller="MyController">
        <p>set the focus in on input field Example </p>
        <!-- add custom directive focus-me in the input field -->
        <input type="text" ng-model="inputValue" focus-me="focusInput">
        <p data-ng-bind="message"></p>
        <p>
            <button data-ng-click="changeFocus()">Change Focus</button>
        </p>
    </div>

    <script>
        var app = angular.module("myApp", []);
        // create custom directive "focusMe"
        app.directive('focusMe', function($timeout) {
            return {
                link: function(scope, element, attrs) {
                scope.$watch(attrs.focusMe, function(value) {
                    if (value === true) {
                    $timeout(function() {
                        element[0].focus();
                    });
                    }
                });
                }
            };
        })
        app.controller('MyController', function($scope) {
            // by default focus in value 'true' of input field
            $scope.focusInput = true;
            $scope.message = "focus in";
            
            // change the focus when button click
            $scope.changeFocus = function(){
                $scope.focusInput = !$scope.focusInput;
                // set the message on <p> tag based in focusInput value 
                if($scope.focusInput)
                {   
                    $scope.message = "focus in";
                }
                else{
                    $scope.message = "focus out";
                }
            }

        });

    </script>

</body>
</html>

In the example above
Directive (focusMe)

The focusMe directive checks the focusInput value using $watch.
If focusInput is true, it uses $timeout to delay the focus operation until after the current digestion cycle.
element[0].focus() is used to focus on the first element of the element in the reference.

HTML Usage

the focus-me="focusInput" attribute of the <input> element binds the directive to the focusInput scope variable.
If the focusInput of the scope changes to true, the instruction will load and set the focus on the input field.

Controller logic

In the controller, you can control when to set the focus by changing the focusInputvariable.
For example, you can set focusInput to true when a condition is satisfied (e.g., after a button is pressed, at startup, etc.).

Also, Read: "this" vs $scope in AngularJS controllers

Markdown for AI

A clean, structured version of this page for AI assistants and LLMs.

Open .md

forum

How to set focus on input field in AngularJS?

Can you answer this question?

1 Answers

Set focus on input field

Using a Directive (recommended method)