AngularJS ng-focus Directive
Last Updated :
03 Aug, 2022
Improve
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:
