屏蔽社会安全号码输入答案

【问题标题】：Masking a social security number input屏蔽社会安全号码输入
【发布时间】：2020-02-27 08:15:49
【问题描述】：

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

为了帮助解决这个问题，我插入了一个 jquery 库，它可以帮助屏蔽 http://igorescobar.github.io/jQuery-Mask-Plugin/ 字段

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

我的 html 只是一个输入字段

<input class='social' />

使用这个插件，我尝试将其屏蔽为

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

这只是提供格式

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

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

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

任何帮助都会很棒！

附：我不能使用密码字段，因为必须向用户显示最后四个数字，而且我不能有多个字段。这是公司的要求。我无法随心所欲地更改公司要求。

【问题讨论】：

您更有可能遇到黑客从您的数据库中提取这些数字的问题，而不是随便的旁观者在用户的肩膀上阅读 SSN。将其放在显眼的位置，如果您使用 SSN 来唯一标识用户，请不要这样做。
这些人住在哪里，在公共计算机上输入机密信息？
老实说，您在执行此步骤时遇到问题的事实表明您可能没有正确保护 SSN。安全性远比隐私重要。
我有一个非常正当的理由。我们正在调出他们的医疗记录。而且，我正在做我的结束，其他程序员正在处理支持。我需要做的就是隐藏他们输入的数字。
@WesleyMurch，谢谢...当我真的只是寻求帮助时，我讨厌不得不解释自己...我想我不应该提到这是为了 ss 号码。

标签： javascript jquery

【解决方案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/

【讨论】：

输入ssn时不起作用，然后尝试在x字符位置更改其值。
@devverma，我不确定你的意思是什么？您是否要更改其中一个 x 的值？如果是这样，上面的 jsfiddle 正在工作。
这是一个有趣的答案，但是，如果您突出显示文本，您可以看到不可见的字段
@Rlan，是的，你可以。在此发布后，我在推特上发布了相当多的内容，并且能够解决该问题。我不记得那是什么了

【解决方案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/

【讨论】：

我需要能够使用我提到的插件。这将使格式无效。
@zazvorniki 该插件不适合您尝试使用它的目的。用于格式化。
我需要使用该插件来格式化和验证他们输入的是数字而不是字母。这是一个比我更高的决定……我需要努力。
但是，您可以使用这个答案并复制正确的值，因为它被输入到隐藏字段中。
@zazvorniki 该插件在提交表单时将字符替换为 x。除非只想验证最后四位数字，否则告诉他们你不能使用它。

【解决方案3】：

这是我改编自 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)">

【讨论】：

出于好奇，我把它放在了一个笨拙的地方，它似乎不起作用。 jsfiddle.net/ne3LL9k3
我试过你的小提琴，但它因“未捕获的 ReferenceError：未定义掩码”而失败。我创建了一个工作示例供您在我的网站上查看：kustomweb.com/mask.php
通常在这里人们发布 jsFiddles 或其他充当代码箱的网站。最终您将更改该链接，然后它将不再适用于该问题。我在上面发布了小提琴，向您展示您上面发布的代码不起作用。
我切换到 CodePen 以显示代码有效。谢谢您的帮助。 codepen.io/anon/pen/LxWVoV
没问题。您可能还希望在此处包含所有代码。很多人只是从答案中复制而不阅读 cmets

【解决方案4】：

我在 2020 年的一些 UI/UX 研究中遇到了这个问题。我现在看到的很多是以下方面的变化：

<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' 以在手机上启用基于数字的键盘。

【讨论】：

【解决方案5】：

这应该可行。

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>

【讨论】：

不使用角度
你可以修改成jquery/javascript。主要逻辑在link函数内部。

【解决方案6】：

如果它对其他人有用，我想让它与 MVC 模型和使用 DataAnnotation 的 MVC Validation 一起工作。而且我无法使用任何插件和库。终于能够使用下面的脚本来实现这一点，但需要注意的是，它会在您从字段中提取出来后进行屏蔽，而不是在输入每个字符时进行屏蔽。

    $('#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 掩码的引用。

【讨论】：