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.