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:
Contents...
Parameter:
- expression: It refers to the variable or the expression to be evaluated.Â
Note: The ng-blur directive is supported by , , and .Â
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>
<head>
<title>ng-blur Directivetitle>
<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">GeeksforGeeksh1>
<div ng-app="app">
<div ng-controller="gfg">
<h3>ng-blur Directiveh3>
<h5 ng-show="msg">Enter your text hereh5>
<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>
<head>
<title>ng-blur Directivetitle>
<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">GeeksforGeeksh1>
<h3>ng-blur Directiveh3>
<textarea ng-blur="count = count + 1"
ng-init="count=0">
textarea>
<h3>Number of times focus losed: {{count}}h3>
body>
html>
Output:
