Question

我使用angular-ui-mask作为SSN，初始ui-mask是＆＃34; 999-99-9999＆＃34;但是在模糊时我需要将SSN 123-45-6789字符显示为XXX- XX-6789。

我尝试将ui-mask设置为XXX-XX-9999，但它显示了＃XXX; XX-XX - ＆＃39;结束时SSN的前4位数字。而不是最后四位数。

这是HTML代码

<input class="btnDropdown" id="phoneTextInput" ui-mask="{{uimaskpattern}}" ui-mask-placeholder-char=""
  ng-focus="applymask()"
  ng-blur="removemask(contact.contactDetails.attributeDetails.contact)"

  md-minlength="10" md-maxlength="10" name="Phone_{{$index}}" ng-model="contact"
  placeholder="">

这里是Typescript代码

public applymask() {
    this.uimaskpattern = "999-99-9999";

}

public removemask(ssn, ev) {
    if (ssn) {
        console.log(ssn);
        this.uimaskpattern = "AAA-AA-9999";
    }
}

Answer 1

有一个名为jquery.maskedinput的jQuery插件可能对此有所帮助。

您可以使用此插件通过创建自定义指令并在其中调用库来屏蔽输入。这是一个工作示例，应该在输入字段失去焦点时屏蔽输入：

＆＃13;

var app = angular.module('myapp', []);
app.controller('MainCtrl', function($scope) {
  $scope.ssn = '';
});

app.directive("ssnMasker", function () {
    return {
        require: "ngModel",
        link: function (scope, elem, attr, ngModel) {
            $(elem).mask("999-99-9999");  // 9 represents a numeric character in this library
            var temp;
            var regxa = /^(\d{3}-?\d{2}-?\d{4})$/;  // regex to define formatting for a SSN
            
            $(elem).focusin(function () {
                $(elem).val(temp);
            });
            
            $(elem).on("blur",function () {
                temp = $(elem).val();
                if (regxa.test($(elem).val())) {  // check for match
                   $(elem).val("XXX-XX" + temp.slice(6));  // change displayed value
               }
            });
        }
    }
});

＆＃13;

<!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">
    Type SSN: <input type="text" ng-model="ssn" ssn-masker >
    <p>Actual SSN: {{ ssn }} </p>
  </body>
</html>

＆＃13;

Answer 2

这也可能是一种尝试的方法 - 尽管它是Angular 1.x风格 - 所以可能有更多的当前/ Angular 2方法来做到这一点。

t1

SSN上的角度UI蒙版模糊

2 个答案: