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.
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:
After clicking the link:
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:
After click on text area:
Supported Browser:
- Google Chrome
- Microsoft Edge
- Firefox
- Opera
- Safari
.png)
