时间戳

首页 > 解决方案 > 模糊时 SSN 的 Angular UI 掩码

javascript - 模糊时 SSN 的 Angular UI 掩码

问题描述

我对 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 位数字，而不是最后四位数字。

这是 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";
    }
}

标签： javascriptangularjsangular-ui

解决方案

有一个名为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>

推荐阅读