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.
<!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.
<!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:
Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.
