AngularJS ng-focus Directive Last Updated : 03 Aug, 2022 Summarize Suggest changes Share Like Article Like Report 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= "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. HTML <!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: Advertise with us Next Article AngularJS ng-form Directive V Vishal Chaudhary 2 Follow Similar Reads AngularJS ng-form Directive The ng-form Directive in AngularJS is used to create a nested form i.e. one form inside the other form. It specifies an inherit control from the HTML form. It creates a control group inside a form directive which can be used to determine the validity of a sub-group of controls. Syntax: <ng-form [ 1 min read AngularJS ng-mouseup Directive The ng-mouseup Directive in AngularJS is used to apply custom behavior when a mouseup event occurs on a specific HTML element. It can be used to show a popup alert when the mouse button is pressed. The order of a mouse click is Mousedown, Mouseup, Click. It is supported by all HTML elements. Syntax: 2 min read AngularJS ng-mousedown Directive The ng-mousedown Directive in AngularJS is used to apply custom behavior when mousedown event occurs on a specific HTML element. It can be used to show a popup alert when the mouse button is pressed down. It is supported by all HTML elements. Syntax: <element ng-mousedown="expression"> Content 1 min read AngularJS ng-mousemove Directive The ng-mousemove Directive in AngularJS is used to apply custom behavior when mousemove event occurs on a specific HTML element. It can be used to display a popup alert when the mouse moves over a specific HTML element. It is supported by all HTML elements. Syntax:<element ng-mousemove="expressio 2 min read AngularJS ng-href Directive The ng-href directive is used when we have an angular expression inside the href value. If href attribute is used then the problem is that if in case the link is clicked before AngularJS has replaced the expression with its value then it may go to the wrong URL and the link will be broken and will m 2 min read AngularJS ng-mouseover Directive The ng-mouseover Directive in AngularJS is used to apply custom behavior when a mouseover event occurs on a specific HTML element. It can be used to show a popup alert when the mouse moves over a specific element. It is supported by all HTML elements. Syntax: <element ng-mouseover="expression" 2 min read Article Tags : Web Technologies AngularJS AngularJS-Directives Like