AngularJS – ng-blur 指令
angularjsweb developmentfront end technology更新于 2026/1/7 6:52:17
当元素失去焦点时，AngularJS 中的 ng-blur 指令 会被触发。blur 事件会与 DOM 操作(例如从焦点移除)同步执行。
如果在 $apply 期间触发该事件，AngularJS 也会使用 scope.$evalAsync 执行表达式，以确保应用程序状态的一致性。
语法
<element ng-blur="expression">..Content..</element>
示例 1 − ng-blur 指令
在 Angular 项目目录中创建文件"ngBlur.html"，并复制粘贴以下代码片段。
<!DOCTYPE html>
<html>
<head>
<title>ngBlur 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;">
Welcome to Tutorials Point
</h1>
<h2>
AngularJS | ngBlur Directive
</h2>
<div ng-app="app">
<div ng-controller="tutorialspoint">
<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("tutorialspoint", [
"$scope",
function ($fun, $timeout) {
$fun.msg = false;
},
]);
</script>
</body>
</html>
输出
要运行上述代码，只需打开您的文件并将其作为普通 HTML 文件运行即可。您将在浏览器窗口中看到以下输出。
当文本框获得焦点时，将显示以下消息−
示例 2
在 Angular 项目目录中创建文件"ngBlur.html"，并复制粘贴以下代码片段。
<!DOCTYPE html>
<html>
<head>
<title>ngBlur 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">
Welcome to Tutorials Point
</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 文件运行即可。您将在浏览器窗口中看到以下输出。
