資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
JavaScript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會科學
時尚研究
法律研究AngularJS – ng-blur 指令
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 檔案一樣執行即可。你將在瀏覽器視窗上看到以下輸出。
更新時間：2021 年 10 月 6 日
546 次瀏覽
廣告