Automatically Set Focus on a Textbox (Input Box) in AngularJS using ng-click and ng-init

Let us assume, you have a form with many input boxes (or textboxes) and you want set focus on a textbox automatically with the click of a button or after selecting or entering some value in the previous input box. You can achieve this in AngularJS, and I’ll demonstrate a few examples showing how to automatically set focus on a textbox or input field using the ng-click and ng-init directives.

I’m sharing two different examples here. In the first, I’ll use the ng-click directive, and in the next, I’ll use the AngularJS ng-init directive. The underlying principle is the same in both examples.

• In the first example, I have two Input boxes of type text and number and a button control. The button’s click event will call a function in my controller to set focus on the textbox (with the number type).

• The second example, I have a jQuery Datepicker control. When I select a date, it would automatically set focus on an Input box (textbox).

Example 1. - Set Focus on an Input box using AngularJS ng-click

The HTML and the Controller

I have two <input> boxes. The first is of type text and second is of type number. Both the elements have unique ids. You can add any type of <input> box for this example to work.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
</head>

<body>
    <div ng-app="myApp" 
        ng-controller="myController">

        <p>Enter your name: <input type="text" id="name" /></p>
            <p><button ng-click="setFocus()" id="bt">Click to Set Focus</button></p>
        <p>Enter your age: <input type="number" id="age" /></p>
    </div>
</body>

<script>
    var myApp = angular.module('myApp', []);
    myApp.controller('myController',
        function ($scope, $window) {

            $scope.setFocus = function () {
                var name = $window.document.getElementById('name');
                var age = $window.document.getElementById('age');
                if (name.value != '')
                    age.focus();
                else {
                    alert('Invalid name');
                    name.focus();
                }
            };
        });
</script>
</html>

Try it

If you have worked with JavaScript, you will find it easy to understand. I am sure the method getElementById() looks familiar to you. In my controller function, I have two objects as $scope and $window.

I have attached a method called setFocus() to the $scope. Here in this method (or function), I’ll check for values in the first <input> box (the name).

In the above markup section, I have declared the ng-click directive to a button control, with an expression setFocus(). When you click the button, it calls setFocus() method in the controller.

The AngularJS $window object provides the method getElementById(). I have declared two variables one each for name and age.

var name = $window.document.getElementById('name');
var age = $window.document.getElementById('age');

I’ll check if the name field has a value. If yes, I’ll set focus on the age field, or the focus remains the in the first (name) field.

age.focus();

Example 2. - Set Focus on an Input box using AngularJS ng-init

In my second example, I am using a jQuery Datepicker control (it’s a widget) attached to an <input> box. What I am trying to show here is, when you select a date, it would automatically set focus on another <input> box.

I also have a condition that set focus only when you select a date. Else, the next <input> box remains hidden.

The Markup and the Controller

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
</head>

<body>
    <div ng-app="myApp" 
        ng-controller="myController">

        <p>
            <input type="text" id="date" datepicker ng-model="datevalue" 
                placeholder="Select a date" />
        </p>
        <p ng-if="datevalue" ng-init="setFocus()">
            <input type="text" placeholder="Enter some value" id="t" />
        </p>
    </div>
</body>

<script>
    var myApp = angular.module('myApp', []);
    myApp.controller('myController',
        function ($scope, $window) {

            $scope.setFocus = function () {
                var someElement = $window.document.getElementById('t');
                someElement.focus();
            };
        });

    myApp.directive("datepicker", function () {
        function link(scope, element, attrs, controller) {
            element.datepicker({
                onSelect: function (dt) {
                    scope.$apply(function () {
                        controller.$setViewValue(dt);
                    });
                },
                dateFormat: "dd/mm/yy"
            });
        }
        return { require: 'ngModel', link: link };
    });
</script>
</html>

Try it

The principle is the same here. Except, the I am calling the setFocus() method using AngularJS ng-init directive.

The second <p> element has ng-if directive along with ng-init.

<p ng-if="datevalue" ng-init="setFocus()">
    <input type="text" placeholder="Enter some value" id="t" />
</p>

The directive ng-if evaluates an expression based on true or false. If true that is, when you select a value from the Datepicker, it will show the <p> element and that will initiate the setFocus() method in the controller (attached with $scope object).

See the code. I am not checking any condition, since ng-if evaluates the expression.

Well, that’s it. Today you have learn two simple ways to set focus automatically on an <input> box of any type in AngularJS using two different methods. I am sure there are other ways to do this. If you know one, do share it with us here.

← PreviousNext →