AngularJS | ng-focus Directive

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 popup alert when element is being focused. It is supported by <a>, <input>, <select> and <textarea> elements.

Syntax:

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

Where expressions tells what to do when input get focused.



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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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><br>
      
    <div class="row" ng-show="isCheck">
        Enter Name: <input type="text" 
            ng-focus="isCheck=true"
            placeholder="geeksforgeeks" />
    </div>
</body>
  
</html>

chevron_right


Output:
Before clicking the link:
ngfocus
After clicking the link:
ngfocus

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:
Before click on text area:
ngfocus
After click on text area:
ngfocus



My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.