模糊时 SSN 的 Angular UI 掩码答案

【问题标题】：Angular UI Mask for SSN on blur模糊时 SSN 的 Angular UI 掩码
【发布时间】：2018-05-29 06:02:06
【问题描述】：

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

我尝试将 ui-mask 设置为 XXX-XX-9999，但它在“XXX-XX-”末尾显示 SSN 的前 4 位数字，而不是最后 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="">

这是打字稿代码

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

}

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

【问题讨论】：

提供一些代码，我们可以为您提供更多帮助。
angular-ui-mask 不是您要查找的库 - 它设置 输入掩码 以限制用户可以在输入字段中键入的内容
这种情况可以用什么？我的要求是当用户输入数字“-”时应该自动应用，这样字符串就变成格式 123-45-6789，当用户电影到另一个字段时，输入应该显示 XXX-XX-6789跨度>

标签： javascript angularjs angular-ui

【解决方案1】：

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

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

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
               }
            });
        }
    }
});

<!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>

【讨论】：

我需要一个不使用 jQuery 的解决方案
那么你可能会想要研究 AngularJS $parsers 和 $formatters。这是一个可能有帮助的小提琴：fiddle.jshell.net/V6GN5/8/light 另请注意，正如@JaromandaX 所提到的，angular-ui-mask 基本上用于确保用户只能以预定义的格式提供输入。它本身并不能满足您的需求。

【解决方案2】：

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

HTML     
<input type="text"
       ng-model="data.ssnDisplay"
       ng-blur="blurFunction()">

JAVASCRIPT
// on page load
if (newUser === true) {
    $scope.data.ssn = ''
}
else {
// would normally be delivered via a service endpoint (hard coded here)
    $scope.data.ssn = '123456789'
}

// create display-only property
$scope.data.ssnDisplay = $scope.data.ssn;

// on blur, update display-only property
$scope.blurFunction = function () {
    $scope.data.ssnDisplay = 'XXXXX' + $scope.data.ssn.substring(5);
}

// always maintain primary ssn value - you'll need this when
// posting/saving your data back to your database
$scope.$watch("data.ssnDisplay", function () {
    $scope.data.ssn = $scope.data.ssnDisplay;
})

【讨论】：

ng-model 不接受带有 '-' 导致 ui-mask 的值
啊 - 明白了。说得通。我想知道是否有一种方法可以使用仍然使用上面的策略，只是以不同的方式管理“-”字符。我更新了上面的示例以删除硬编码的“_”字符。