AngularJS | ng-blur Directive
The ng-blur Directive in AngularJS is fired when an HTML element loses their focus. It doesn’t override with element original onblur event i.e. both the ng-blur expression and original onblur event will execute.
Syntax:
<element ng-blur="expression"> Contents... </element>
Where expression refers to the variable or the expression to be evaluated.
Note: The ng-blur directive is supported by <input>, <a>, <select> and <textarea>.
Example 1: This example displays the text message “Enter your text here” when the input is focused and hide it when the input focus loses.
<!DOCTYPE html> < html > < head > < title >ng-blur Directive</ title > < script src = </ script > </ head > < body style = "text-align:center" > < h1 style = "color:green" >GeeksforGeeks</ h1 > < div ng-app = "app" > < div ng-controller = "gfg" > < h3 >ng-blur Directive</ h3 > < h5 ng-show = "msg" >Enter your text here</ h5 > < input type = "text" ng-focus = "msg=true" ng-blur = "msg=false" /> </ div > </ div > < script > var app = angular.module("app", []); app.controller('gfg', ['$scope', function ($fun, $timeout) { $fun.msg = false; }]); </ script > </ body > </ html > |
Output:
When input is focused:
When input is not focused:
Example 2: This example counts the number of times focus removed from the textarea.
<!DOCTYPE html> < html > < head > < title >ng-blur Directive</ title > < script src = </ script > </ head > < body ng-app = "" style = "text-align:center" > < h2 style = "color:green" >ng-blur Directive</ h2 > < textarea ng-blur = "count = count + 1" ng-init = "count=0" > </ textarea > < h3 >Number of times focus losed: {{count}}</ h3 > </ body > </ html > |
Output:
Recommended Posts:
- AngularJS | ng-app Directive
- AngularJS | ng-if Directive
- AngularJS | ng-jq Directive
- AngularJS | ng-src Directive
- AngularJS | ng-cut Directive
- AngularJS | ng-value Directive
- AngularJS | ng-csp Directive
- AngularJS | Directive
- AngularJS | ng-selected Directive
- AngularJS | ng-required Directive
- AngularJS | ng-paste Directive
- AngularJS | ng-srcset Directive
- AngularJS | ng-readonly Directive
- AngularJS | ng-bind Directive
- AngularJS | textarea Directive
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.