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=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </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






                        filter_none








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= 


"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> 


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







                        filter_none








Output:

Before click on text area:

ngfocus

After click on text area:

ngfocus



          
          
          
          

            

    

        My Personal Notes
        arrow_drop_up
    

    

        
        

            
            
        

    


Recommended Posts:
Vishal Chaudhary 2
Check out this Author's contributed articles.
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.