时间戳

首页 > 解决方案 > 使用 angular-ui-mask 时屏蔽 SSN 的前 5 个字符

javascript - 使用 angular-ui-mask 时屏蔽 SSN 的前 5 个字符

问题描述

我使用 angular-ui-mask 以这种格式 123-45-6789 显示 ssn，但我还想在输入框失去焦点时隐藏前 5 个字符，并在输入框获得焦点时显示所有数字。

我的 HTML

<input class="btnDropdown" 
       id="phoneTextInput" 
       ui-mask="{{uimaskpattern}}" 
       ui-mask-placeholder-char=""
       ng-focus="applymask()"
       ng-blur="phoneForm['Phone_'+$index].$viewValue = removemask(contact.contactDetails.attributeDetails.contact)"
       md-minlength="10" 
       md-maxlength="10" 
       name="Phone_{{$index}}" 
       ng-model="contact.contactDetails.attributeDetails.contact">

角代码：

uimaskpattern 的初始值 = "999-99-9999"

//When input gets focus
public applymask() {
    this.uimaskpattern = "999-999-9999";
}

//When input loses focus
public removemask(ssn) {
    if (ssn) {
        console.log(ssn);
        this.uimaskpattern = "XXX-XXX-9999";
        let formstring = 'XXX-XXX-'+ssn.slice(6, ssn.length);
        console.log(formstring);
        return formstring;
    }
}

我面临的问题是，在模糊时，如果用户输入 123456789，那么在模糊时，文本变为 XXX-XX-1234，而不是 XXX-XX-6789，即，而不是 6789，附加的数字是前 4，如果我只是用 {{}} 打印返回的字符串，它正在正确显示

标签： javascriptjqueryangularjsangularjs-directive

解决方案

如下更改 ng-blur

ng-blur="removemask(contact.contactDetails.attributeDetails.contact)"

并按如下方式删除掩码功能并立即检查。它可能会起作用

public removemask(ssn) {
    if (ssn) {
        console.log(ssn);
        this.uimaskpattern = "XXX-XXX-9999";
        let formstring = 'XXX-XXX-'+ssn.slice(6, ssn.length);
        console.log(formstring);
        ssn=formstring;
    }
}

推荐阅读