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