AngularJS ng-focus Directive
Last Updated :
11 Jul, 2025
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.
<!DOCTYPE html>
<html>
<head>
<title>ng-focus Directive</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</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.
<!DOCTYPE html>
<html>
<head>
<title>ng-focus Directive</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</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:
