La directiva ng-blur en AngularJS se activa cuando un elemento HTML pierde su foco. No se anula con el evento onblur original del elemento, es decir, se ejecutarán tanto la expresión ng-blur como el evento onblur original.
Sintaxis:
<element ng-blur="expression"> Contents... </element>
Donde expresión se refiere a la variable o expresión a evaluar.
Nota: la directiva ng-blur es compatible con <input>, <a>, <select> y <textarea>.
Ejemplo 1: este ejemplo muestra el mensaje de texto «Ingrese su texto aquí» cuando la entrada está enfocada y lo oculta cuando pierde el foco de entrada.
<!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>
Salida:
Cuando la entrada está enfocada: 
Cuando la entrada no está enfocada:
Ejemplo 2: este ejemplo cuenta la cantidad de veces que se eliminó el enfoque del área de texto.
<!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">
<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>
Producción:
Publicación traducida automáticamente
Artículo escrito por Vishal Chaudhary 2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA