当元素失去焦点时,AngularJS 中的ng-blur 指令会被触发。blur事件与DOM 操作(如从焦点移开)同步执行。
如果在$apply期间触发事件,AngularJS 也会使用scope.$evalAsync执行表达式,以确保一致的应用程序状态。
<element ng-blur="expression">..Content..</element>
在您的 Angular 项目目录中创建一个文件“ ngBlur.html ”并复制粘贴以下代码片段。
<!DOCTYPE html> <html> <head> <title>ngBlur Directive</title> <script xx_src="https://cdn.staticfile.org/angularjs/1.6.9/angular.min.js"></script> </head> <body style="text-align: center;"> <h1 style="color: green;"> Welcome to nhooo.com </h1> <h2> AngularJS | ngBlur Directive </h2> <div ng-app="app"> <div ng-controller="nhooo"> <h5 ng-show="msg">Input Text Box Focused</h5> <input type="text" ng-focus="msg=true" ng-blur="msg=false" /> </div> </div> <!-- Script for passing the values and checking... --> <script> var app = angular.module("app", []); app.controller("nhooo", [ "$scope", function ($fun, $timeout) { $fun.msg = false; }, ]); </script> </body> </html>输出结果
要运行上述代码,只需转到您的文件并将其作为普通 HTML 文件运行即可。您将在浏览器窗口中看到以下输出。
当文本框被聚焦时,会出现消息 -
在您的 Angular 项目目录中创建一个文件“ ngBlur.html ”并复制粘贴以下代码片段。
<!DOCTYPE html> <html> <head> <title>ngBlur Directive</title> <script xx_src="https://cdn.staticfile.org/angularjs/1.6.9/angular.min.js"></script> </head> <body ng-app="" style="text-align: center;"> <h1 style="color:green"> Welcome to nhooo.com </h1> <h2> AngularJS | ngBlur Directive </h2> <textarea ng-blur="count = count + 1" ng-init="count=0"></textarea> <h3>Number of times box was focussed: {{count}}</h3> </body> </html>输出结果
要运行上述代码,只需转到您的文件并将其作为普通 HTML 文件运行即可。您将在浏览器窗口中看到以下输出。