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: