Question

我的表单中有一个输入信用卡号。

  <input type="text" class="form-control" name="CCnumber" ng-model="CCnumber" ng-blur="balanceParent.maskCreditCard(this)">

关于模糊，我想屏蔽信用卡输入：

4444 ************

然后关注焦点，我想退回原来的信用卡号码：

4444333322221111

使用ng-blur，我可以使用简单的javascript来返回屏蔽输入。

    vm.maskCreditCard = function(modalScope) {
      if(modalScope.CCnumber){
      var CCnumber = modalScope.CCnumber.replace(/\s+/g, '');
      var parts = CCnumber.match(/[\s\S]{1,4}/g) || [];
      for(var i = 0; i < parts.length; i++) {
        if(i !== 0) {
        parts[i] = '****';
      }
    }
    modalScope.CCnumber = parts.join("");
  }
};

我的问题是，一旦用户再次关注输入，就会返回该号码。有没有办法保留输入的初始值，同时还要屏蔽它？

Answer 1

您可以使用data-属性来保持它。我知道一个jQuery版本：

＆＃13;

$(function () {
  $("#cCard").blur(function () {
    cCardNum = $(this).val();
    $(this).data("value", cCardNum);
    if (cCardNum.length > 4) {
      $(this).val(cCardNum.substr(0, 4) + "*".repeat(cCardNum.length - 4))
    }
  }).focus(function () {
    $(this).val($(this).data("value"));
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="text" id="cCard" />

＆＃13;

这是String.prototype.repeat函数的填充：

if (!String.prototype.repeat) {
  String.prototype.repeat = function(count) {
    'use strict';
    if (this == null) {
      throw new TypeError('can\'t convert ' + this + ' to object');
    }
    var str = '' + this;
    count = +count;
    if (count != count) {
      count = 0;
    }
    if (count < 0) {
      throw new RangeError('repeat count must be non-negative');
    }
    if (count == Infinity) {
      throw new RangeError('repeat count must be less than infinity');
    }
    count = Math.floor(count);
    if (str.length == 0 || count == 0) {
      return '';
    }
    // Ensuring count is a 31-bit integer allows us to heavily optimize the
    // main part. But anyway, most current (August 2014) browsers can't handle
    // strings 1 << 28 chars or longer, so:
    if (str.length * count >= 1 << 28) {
      throw new RangeError('repeat count must not overflow maximum string size');
    }
    var rpt = '';
    for (;;) {
      if ((count & 1) == 1) {
        rpt += str;
      }
      count >>>= 1;
      if (count == 0) {
        break;
      }
      str += str;
    }
    return rpt;
  }
}

Answer 2

我为此创建了一个属性指令。 Angular最佳实践是在指令内操作DOM而不是控制器。

在您的情况下，将blur事件绑定到元素时，应将当前值保存到变量中。然后，您可以在绑定focus事件时访问此变量。

 angular.module('CreditApp', [])
     .directive('maskInput', function() {
         return {
             restrict: "A",
             link: function(scope, elem, attrs) {
                 elem.bind("blur", function() {
                     var number = elem.val();
                     elem.val(elem.val().slice(0,4) + elem.slice(4).replace(/\d/g, '*'));
                 });
                 elem.bind("focus", function() {
                     elem.val(number);
                });
             }
        }
  });

我刚为这个

创建了一个plunkr

http://plnkr.co/edit/ZywTmF7xfz2FyvRULLjL?p=preview

尝试在输入框中键入信用卡号，然后在框外单击。这是blur事件，信用卡号将被屏蔽。现在，再次单击该框内部，将恢复该值。

Answer 3

查找angularjs指令的工作Plunker，以格式化 xxxxxxxxxxxx3456 Fromat中的卡号。Plunker for Card Number Masking

angular.module('myApp', [])

   .directive('maskInput', function() {
    return {
            require: "ngModel",
            restrict: "AE",
            scope: {
                ngModel: '=',
             },
            link: function(scope, elem, attrs) {
                var orig = scope.ngModel;
                var edited = orig;
                scope.ngModel = edited.slice(4).replace(/\d/g, 'x') + edited.slice(-4);

                elem.bind("blur", function() {
                    var temp;
                    orig  = elem.val();
                    temp = elem.val();
                    elem.val(temp.slice(4).replace(/\d/g, 'x') + temp.slice(-4));
                });

                elem.bind("focus", function() {
                    elem.val(orig);
               });  
            }
       };
   })
  .controller('myCtrl', ['$scope', '$interval', function($scope, $interval) {
    $scope.creditCardNumber = "1234567890123456";
  }]);

面具信用卡输入模糊

3 个答案: