屏蔽社会安全号码输入
对于Web应用程序，我构建隐私非常重要，用户输入数据的格式也是如此。
为了帮助解决这个问题，我已经插入了一个jquery库来帮助掩盖字段http://igorescobar.github.io/jQuery-Mask-Plugin/
但是，我似乎无法掩盖社会安全号码。 例如，格式很好地通过567-78-7890，但我似乎无法弄清楚如何掩盖或隐藏前四个数字……如* – -7890。
我的html只是一个输入字段
并使用此插件我尝试将其屏蔽为
$('.social').mask('000-00-0000');
这只是提供格式
$('.newsocial').mask('xxx-xx-0000');
这只会替换他们用x输入的数字。
我还设置了一个jsFiddle帮助http://jsfiddle.net/w2sccqwy/1/
任何帮助都会很精彩！
PS我不能使用密码字段，因为必须向用户显示最后四个数字，并且我不能有多个字段。 这是公司的要求。 我不能像我想的那样改变公司的要求。
对于任何可能在未来遇到这种情况的人，我能够找到一种解决方案，它将屏蔽任何类型的字段并对其进行格式化，而不会弄乱任何其他插件。
在html中你需要两个输入
然后将数字字段放在值上
然后在你的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/
$(".social, .newsocial").on("keydown keyup", function(e) { $(this).prop("value", function(i, o) { if (o.length < 7) { return o.replace(/\d/g,"*") } }) })
这是我改编自纯javascript掩码的代码，用于手机， 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添加到输入字段
如果它对其他人有用，我想通过DataAnnotation使用MVC模型和MVCvalidation。 我无法使用任何插件和库。 最后能够使用下面的脚本来解决这个问题，它会在你从字段中跳出而不是在键入每个字符时屏蔽之后屏蔽它。
$('#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掩码的引用。
这应该工作。
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)); } }); } } });
Enter SSN Real SSN {{modelssn}}