AngularJS | ng-blur指令 - 芒果文档

📌 相关文章

📜 AngularJS | ng-blur指令

📅 最后修改于: 2021-05-13 19:38:06 🧑 作者: Mango

当HTML元素失去焦点时，将触发AngularJS中的ng-blur指令。它不会用元素原始onblur事件覆盖，即ng-blur表达式和原始onblur事件都将执行。

句法：

 Contents...

其中表达式是指变量或要求值的表达式。

注意： ，，支持ng-blur指令。</p> <p><strong>示例1：</strong>本示例在输入焦点对准时显示文本消息“在此处输入文本”，而在输入焦点消失时将其隐藏。 </p> <div class="hcb_wrap"> <pre class="prism line-numbers lang-python" data-lang="Python"><code class="replace"><!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> </code></pre> </div> <p><strong>输出：</strong><br/><strong>重点关注输入时：</strong> <br/><img alt="ng-blur" class="img-fluid" src="https://mangdo-1254073825.cos.ap-chengdu.myqcloud.com//front_eng_imgs/geeksforgeeks2021/AngularJS%20%7C%20ng-blur%20Directive_0.jpg"/><br/><strong>当输入不集中时：</strong> <br/><img alt="ng-blur" class="img-fluid" src="https://mangdo-1254073825.cos.ap-chengdu.myqcloud.com//front_eng_imgs/geeksforgeeks2021/AngularJS%20%7C%20ng-blur%20Directive_1.jpg"/></p> <p><strong>示例2：</strong>此示例计算从文本区域中移出焦点的次数。 </p> <div class="hcb_wrap"> <pre class="prism line-numbers lang-python" data-lang="Python"><code class="replace"><!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">

Number of times focus losed: {{count}}

输出：