forum

Home / DeveloperSection / Forums / How to set focus on input field in AngularJS?

Ask Question
Revati S Misra

Revati S Misra

Follow
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.

Can you answer this question?

Answer

1 Answers

Ashutosh Kumar Verma

Ashutosh Kumar Verma

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 focusInput variable.
  • 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

MindStick Training

Liked By