Question

对于Web应用程序，我构建隐私非常重要，用户输入数据的格式也是如此。

为了帮助解决这个问题，我已经插入了一个jquery库来帮助掩盖字段http://igorescobar.github.io/jQuery-Mask-Plugin/

但是，我似乎无法掩盖社会安全号码。例如，格式很好地通过567-78-7890，但我似乎无法弄清楚如何掩盖或隐藏前四个数字......如 * - -7890。 / p>

我的html只是一个输入字段

<input class='social' />

并使用此插件我尝试将其屏蔽为

$('.social').mask('000-00-0000');

这只是提供格式

$('.newsocial').mask('xxx-xx-0000');

这只会替换他们用x输入的数字。

我还设置了一个jsFiddle帮助 http://jsfiddle.net/w2sccqwy/1/

任何帮助都会很精彩！

P.S。我不能使用密码字段，因为必须向用户显示最后四个数字，并且我不能有多个字段。这是公司的要求。我不能像我想的那样改变公司的要求。

Answer 1

对于任何可能在未来遇到这种情况的人，我能够找到一种能够掩盖任何类型字段并将其格式化的解决方案，而不会弄乱任何其他插件。

在html中你需要两个输入

<input class='number' />
<input class='value' />

然后将数字字段放在值

上

然后在你的javascript中

 $('.value').on('keydown keyup mousedown mouseup', function() {
     var res = this.value, //grabs the value
         len = res.length, //grabs the length
         max = 9, //sets a max chars
         stars = len>0?len>1?len>2?len>3?len>4?'XXX-XX-':'XXX-X':'XXX-':'XX':'X':'', //this provides the masking and formatting
        result = stars+res.substring(5); //this is the result
     $(this).attr('maxlength', max); //setting the max length
    $(".number").val(result); //spits the value into the input
});

对于那些想要看到结果的人来说，这是一个jsFiddle。 http://jsfiddle.net/gtom9tvL/

Answer 2

$(".social, .newsocial").on("keydown keyup", function(e) {
    $(this).prop("value", function(i, o) {
        if (o.length < 7) {
          return o.replace(/\d/g,"*")
        }
    })
})

http://jsfiddle.net/w2sccqwy/3/

Answer 3

在一些UI / UX研究中，我会在2020年遇到这个问题。我现在看到的很多内容是以下内容的变体：

<input id='set1' type='password' maxLength='3' minLength='3'>
"-"
<input id='set2' type='password' maxLength='2' minLength='2'>
"-"
<input id='set3' type='text' maxLength='4' minLength='4' pattern='[0-9]*'>

您还可以添加inputmode='numeric'以在移动设备上启用基于数字的键盘。

Answer 4

这是我改编自Javascript phone mask for text field with regex手机的纯javascript面具的代码。我在这里创建了一个codepen http://codepen.io/anon/pen/LxWVoV

function mask(o, f) {
    setTimeout(function () {
        var v = f(o.value);
        if (v != o.value) {
            o.value = v;
        }
    }, 1);
}

function mssn(v) {
    var r = v.replace(/\D/g,"");
    if (r.length > 9) {
        r = r.replace(/^(\d\d\d)(\d{2})(\d{0,4}).*/,"$1-$2-$3");
        return r;
    }
    else if (r.length > 4) {
        r = r.replace(/^(\d\d\d)(\d{2})(\d{0,4}).*/,"$1-$2-$3");
    }
    else if (r.length > 2) {
        r = r.replace(/^(\d\d\d)(\d{0,3})/,"$1-$2");
    }
    else {
        r = r.replace(/^(\d*)/, "$1");
    }
    return r;
}

要使用它，请将onblur和onkeyup添加到输入字段

<input type="text" value="" id="ssn" onkeyup="mask(this, mssn);" onblur="mask(this, mssn)">

Answer 5

万一它对其他人有用，我想让它与MVC模型一起使用，并与DataAnnotation一起进行MVC验证。而且我无法使用任何插件和库。最终，它能够与下面的脚本一起使用，但需要注意的是，在您从字段中跳出后，它将隐藏而不是在键入每个字符时将其隐藏。

    $('#SSN').mask("999-99-9999", { placeholder: 'nnn-nn-nnnn' });
    var temp;
    var regxa = /^(\d{3}-?\d{2}-?\d{4})$/;
    $('#SSN').focusin(function () {
        $('#SSN').val(temp);
    });
    $('#SSN').on('blur', function () {
        temp = $('#SSN').val();
        if (regxa.test($('#SSN').val())) {
            $('#SSN').val("XXX-XX" + temp.slice(6));
        }
    });

您将需要引用jquery和jquery掩码。

Answer 6

这应该有用。

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>

屏蔽社会安全号码输入

6 个答案: