Skip to content
Related Articles

Related Articles

Improve Article

AngularJS | ng-focus Directive

  • Last Updated : 31 Aug, 2021

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.  

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

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.  

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: 
Before click on text area:  

ngfocus

After click on text area:  

ngfocus

Supported Browser:

  • Google Chrome
  • Microsoft Edge
  • Firefox
  • Opera
  • Safari
     



My Personal Notes arrow_drop_up
Recommended Articles
Page :