---
title: "How to set focus on input field in AngularJS?"  
description: "How to set focus on input field in AngularJS?"  
author: "Revati S Misra"  
published: 2024-06-17  
updated: 2024-06-17  
canonical: https://www.mindstick.com/forum/160748/how-to-set-focus-on-input-field-in-angularjs  
category: "angular js"  
tags: ["javascript", "angular js", "angularJS form"]  
reading_time: 3 minutes  

---

# How to set focus on input field in AngularJS?

How to set [focus](https://yourviews.mindstick.com/audio/1251/how-music-can-improve-your-focus-and-mood) on the [input](https://www.mindstick.com/forum/159209/how-can-i-read-convert-an-input-stream-into-a-string-in-java) [field](https://www.mindstick.com/forum/160867/does-mindstick-provide-training-for-field-marketing) in AngularJS [form](https://www.mindstick.com/forum/6/multi-form-mfc-application)?

## Replies

### Reply by Ashutosh Patel

## 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.

```javascript
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.

```javascript
<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.

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

## Example-

```javascript
<!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](https://www.mindstick.com/forum/160747/this-vs-scope-in-angularjs-controllers)


---

Original Source: https://www.mindstick.com/forum/160748/how-to-set-focus-on-input-field-in-angularjs

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
