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’s original onblur event i.e. both the ng-blur expression and original onblur event will execute.
Syntax:
<element ng-blur="expression">
Contents...
</element>
Parameter:
- expression: It 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 hides it when the input focus loses.
HTML
<!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:
Example 2: This example counts the number of times focus is removed from the textarea.
HTML
<!DOCTYPE html>
< html >
< head >
< title >ng-blur Directive</ title >
< script src =
</ script >
</ head >
< body ng-app = "" style = "text-align:center" >
< h1 style = "color:green" >GeeksforGeeks</ h1 >
< h3 >ng-blur Directive</ h3 >
< textarea ng-blur = "count = count + 1"
ng-init = "count=0" >
</ textarea >
< h3 >Number of times focus losed: {{count}}</ h3 >
</ body >
</ html >
|
Output:
Last Updated :
08 Aug, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...