Question

我试图使用角度js屏蔽SSN号码。

预期：

用户只能输入过滤器完成的数字和SSN格式。下面是我写的示例代码。

指令：

app.directive('taxId', function ($filter, $browser) {
return {
    require: 'ngModel',
    link: function ($scope, $element, $attrs, ngModelCtrl) {
        var listener = function () {
            var value = $element.val().replace(/[^0-9]/g, '');
            if (value.length > 9)
                value = value.slice(0, 9);
            var type = $attrs.taxId;
            $element.val($filter('taxId')(value, type, false));
        };

        // This runs when we update the text field
        ngModelCtrl.$parsers.push(function (viewValue) {
            return viewValue.replace(/[^0-9]/g, '').slice(0, 10);
        });

        // This runs when the model gets updated on the scope directly and keeps our view in sync
        ngModelCtrl.$render = function () {
            $element.val($filter('taxId')(ngModelCtrl.$viewValue, $attrs.taxId, false));
        };

        $element.bind('change', listener);
        $element.bind('keydown', function (event) {
            var key = event.keyCode;
            // If the keys include the CTRL, SHIFT, ALT, or META keys, or the arrow keys, do nothing.
            // This lets us support copy and paste too
            if (key == 91 || (15 < key && key < 19) || (37 <= key && key <= 40)) {
                return;
            }
            $browser.defer(listener); // Have to do this or changes don't get picked up properly
        });

        if ($attrs.taxId== "ssn") {
            $element.bind('blur', function () {
                $scope.$apply(function () {

                });
            });

            $element.bind('focus', function () {
                $scope.$apply(function () {

                });
            });
        }

        $element.bind('paste cut', function () {
            $browser.defer(listener);
        });
    }

};

}）; 过滤

app.filter('taxId', function () {
return function (taxId, type) {
    if (!taxId) { return ''; }

    var value = taxId.toString().replace(/^\+/, '');

    if (value.match(/[^0-9]/)) {
        return taxId;
    }

    if (type.toLowerCase() == "fein") {
        if (value.length == 10) {
            value = value.slice(0, 2) + "-" + value.slice(2, value.length - 1);
            return value;
        } else if (value.length > 2) {
            return (value.slice(0, 2) + "-" + value.slice(2, value.length));
        }
        else {
            return value.slice(0, 9);
        }
    }
    else if(type.toLowerCase() == "ssn"){
        if (value.length > 5) {
            return (value.slice(0,3) + "-" + value.slice(3,5) + "-" + value.slice(5,value.length));
        }
        else if (value.length > 3) {
            return (value.slice(0, 3) + "-" + value.slice(3, value.length));
        }
        else {
            return value;
        }
    }
};

}）;

我能够成功格式化SSN。但掩盖我无法做到。我通过以下关于掩蔽的链接，但无济于事。我需要编写特殊函数来屏蔽和取消屏蔽'blur'和'focus'中的指令。最后，ng-model应包含值“999993213”，但UI中的值应显示为“ * - -3213”（格式和掩码）。

感谢您的输入。谢谢。

Masking in AngularJS

Answer 1

这应该有用。

var app = angular.module('myapp', []);
app.controller('MainCtrl', function($scope) {
  $scope.modelssn = '';
});

app.directive("ssnInput",function(){
    return {
        require:'ngModel',
        link: function(scop, elem, attr, ngModel){
            $(elem).mask("999-99-9999");
            var temp;
            var regxa = /^(\d{3}-?\d{2}-?\d{4})$/;
            $(elem).focusin(function(){
                $(elem).val(temp);
            });
            $(elem).on('blur',function(){
                temp = $(elem).val();
                if(regxa.test($(elem).val())){
                   $(elem).val("XXX-XX" + temp.slice(6));
               }
            });
        }
    }
});

<!DOCTYPE html>
<html ng-app="myapp">
  <head>
    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="https://cdn.rawgit.com/digitalBush/jquery.maskedinput/master/src/jquery.maskedinput.js"></script>
    <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
    <script src="app.js"></script>
  </head>
  <body ng-controller="MainCtrl">
    Enter SSN <input type="text" ng-model="modelssn" ssn-input >
    <p>Real SSN {{modelssn}} </p>
  </body>
</html>

角度js中的SSN掩蔽

1 个答案: