How to set focus on input field in AngularJS?

Question

Ashutosh Kumar Verma · Answer

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.
andlt;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;
});
and 
Example-and 
andlt;!DOCTYPE html>
andlt;html data-ng-app="myApp">
andlt;head>
    andlt;meta charset='utf-8'>
    andlt;meta http-equiv='X-UA-Compatible' content='IE=edge'>
    andlt;title>Focus input field Exampleandlt;/title>
    andlt;meta name='viewport' content='width=device-width, initial-scale=1'>
    andlt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">andlt;/script>
andlt;/head>
andlt;body>
    andlt;div data-ng-controller="MyController">
        andlt;p>set the focus in on input field Example andlt;/p>
        andlt;!-- add custom directive focus-me in the input field -->
        andlt;input type="text" ng-model="inputValue" focus-me="focusInput">
        andlt;p data-ng-bind="message">andlt;/p>
        andlt;p>
            andlt;button data-ng-click="changeFocus()">Change Focusandlt;/button>
        andlt;/p>
    andlt;/div>
    andlt;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 andlt;p> tag based in focusInput value 
                if($scope.focusInput)
                {   
                    $scope.message = "focus in";
                }
                else{
                    $scope.message = "focus out";
                }
            }
        });
    andlt;/script>
andlt;/body>
andlt;/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 andlt;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.
and 
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.).
and 
Also, Read: "this" vs $scope in AngularJS controllers

forum

How to set focus on input field in AngularJS?

Revati S Misra

Can you answer this question?

1 Answers

Set focus on input field

Using a Directive (recommended method)

Liked By