AngularJs 失去焦点事件

来源：互联网发布：网络推广都做些什么编辑：程序博客网时间：2024/04/30 13:57

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
    <style>
        body {
            padding-top:30px;
        }
    </style>
    <script src="angular.js"></script>
    <script>
        var app = angular.module('app', []);
        app.controller('Ctrl', function ($scope) {
            //array of edited fields (optional)
            $scope.focusField1 = false;
            $scope.focusField2 = false;

            //handle method for field1 blur
            $scope.doneEditing1 = function () {
                $scope.countedValue = 'Blur from field1: ' + $scope.value1 + ' * ' + $scope.value2 + ' = ' + $scope.value1 * $scope.value2;
            }
            //handle method for field2 blur
            $scope.doneEditing2 = function () {
                $scope.countedValue = 'Blur from field2: ' + $scope.value2 + ' * ' + $scope.value1 + ' = ' + $scope.value1 * $scope.value2;
            }

            $scope.value1 = 1;
            $scope.value2 = 2;
            $scope.countedValue = 'After blur on field change to field1 * field2';
        });
        //focus directive
        app.directive('myFocus', function () {
            return {
                restrict: 'A',
                link: function (scope, element, attr) {
                    scope.$watch(attr.myFocus, function (n, o) {
                        if (n != 0 && n) {
                            element[0].focus();
                        }
                    });
                }
            };
        });
        //blur directive
        app.directive('myBlur', function () {
            return {
                restrict: 'A',
                link: function (scope, element, attr) {
                    element.bind('blur', function () {
                        //apply scope (attributes)
                        scope.$apply(attr.myBlur);
                        //return scope value for focusing to false
                        scope.$eval(attr.myFocus + '=false');
                    });
                }
            };
        });
    </script>
</head>
<body>
<div class="container">
<div class="col-sm-8 col-sm-offset-2">

<div ng-app="app" ng-controller="Ctrl">
    <div>
        <label>field1:</label>
        <input name="field1" ng-model="value1" my-focus="focusField1" my-blur="doneEditing1()" />
        <br/>
        <label>field2:</label>
        <input name="field2" ng-model="value2" my-focus="focusField2" my-blur="doneEditing2()" />
        <br/>
        <br/> <span>{{countedValue}}</span>

        <br/>
        <br/>
        <button type="button" ng-click="focusField1=true">focus field1</button>
        <button type="button" ng-click="focusField2=true">focus field2</button>
    </div>
</div>

</div>
</div>
</body>

</html>

补充：

当失去焦点时验证错误

如果你想保留错误验证的实时性，那么可以在用户离开该输入框时显示错误信息。要做到这一点，我们可以添加一个指令，将添加一个新的变量。

我们使用 ngFocus 指令，它看起来像：

app.directive('ngFocus', [function() {  var FOCUS_CLASS = "ng-focused";  return {    restrict: 'A',    require: 'ngModel',    link: function(scope, element, attrs, ctrl) {      ctrl.$focused = false;      element.bind('focus', function(evt) {        element.addClass(FOCUS_CLASS);        scope.$apply(function() {ctrl.$focused = true;});      }).bind('blur', function(evt) {        element.removeClass(FOCUS_CLASS);        scope.$apply(function() {ctrl.$focused = false;});      });    }  }}]);

要使用 ngFocus ，我们只需要简单加上这个指令到输入框元素上，像这样：

<input ng-class="{error: signup_form.name.$dirty && signup_form.name.$invalid}" type="text" placeholder="Name" name="name" ng-model="signup.name" ng-minlength=3 ng-maxlength=20 required ng-focus />

加上 ngFocus 指令后，将在输入框的blur和focus事件中注册相应操作，当焦点在该输入框时，它添加一个class（ng-focused），并且该输入框的$focused属性也将变为true。因此，你可以根据需求是否在焦点上来个性化设置显示错误消息。例如：

<div class="error" ng-show="signup_form.name.$dirty && signup_form.name.$invalid && !signup_form.name.$focused">

0 0