Skip to content
Related Articles

Related Articles

AngularJS ng-focus Directive

Improve Article
Save Article
  • Last Updated : 03 Aug, 2022
Improve Article
Save Article

The ng-focus Directive in AngluarJS is used to apply custom behavior when an element is focused. It can be used to show/hide some element or it can pop up an alert when an element is being focused. It is supported by <a>, <input>, <select> and <textarea> elements.

Syntax:  

<element ng-focus="expression"> 
    Contents... 
</element>

Parameter:

  • expressions: It specifies what to do when the input gets focused.

Example 1: This example uses the ng-focus Directive to display the text area field.  

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>ng-focus Directive</title>
    <script src=
    </script>
</head>
 
<body ng-app="" style="text-align:center">
    <h1 style="color:green">GeeksforGeeks</h1>
    <h2>ng-focus Directive</h2>
        <a href="" ng-focus="isCheck=true">
        Click to proceed.
    </a><br>
    <div class="row" ng-show="isCheck">
    Enter Name:
        <input type="text"
               ng-focus="isCheck=true"
               placeholder="geeksforgeeks" />
    </div>
</body>
</html>

Output:

 

Example 2: This example uses the ng-focus Directive to display focus on the input text field.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>ng-focus Directive</title>
    <script src=
    </script>
</head>
 
<body ng-app="app" style="text-align:center;">
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <h2>ng-focus Directive</h2>
    <div ng-controller="geek"> Input:
        <input type="text"
               ng-focus="focused = true"
               ng-blur="focused = false" />
            <pre ng-show="focused">
                Input is focused.
            </pre>
    </div>
    <script>
        var app = angular.module("app", []);
        app.controller('geek', ['$scope',
                        function($scope) {}]);
    </script>
</body>
</html>

Output:

 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!