我正在尝试使用 Angular js 屏蔽 SSN 号码。
预期:
用户只能输入由过滤器完成的数字和 SSN 格式。下面是我写的示例代码。
指令:
app.directive('taxId', function ($filter, $browser) {
return {
require: 'ngModel',
link: function ($scope, $element, $attrs, ngModelCtrl) {
var listener = function () {
var value = $element.val().replace(/[^0-9]/g, '');
if (value.length > 9)
value = value.slice(0, 9);
var type = $attrs.taxId;
$element.val($filter('taxId')(value, type, false));
};
// This runs when we update the text field
ngModelCtrl.$parsers.push(function (viewValue) {
return viewValue.replace(/[^0-9]/g, '').slice(0, 10);
});
// This runs when the model gets updated on the scope directly and keeps our view in sync
ngModelCtrl.$render = function () {
$element.val($filter('taxId')(ngModelCtrl.$viewValue, $attrs.taxId, false));
};
$element.bind('change', listener);
$element.bind('keydown', function (event) {
var key = event.keyCode;
// If the keys include the CTRL, SHIFT, ALT, or META keys, or the arrow keys, do nothing.
// This lets us support copy and paste too
if (key == 91 || (15 < key && key < 19) || (37 <= key && key <= 40)) {
return;
}
$browser.defer(listener); // Have to do this or changes don't get picked up properly
});
if ($attrs.taxId== "ssn") {
$element.bind('blur', function () {
$scope.$apply(function () {
});
});
$element.bind('focus', function () {
$scope.$apply(function () {
});
});
}
$element.bind('paste cut', function () {
$browser.defer(listener);
});
}
};
}); 过滤器:
app.filter('taxId', function () {
return function (taxId, type) {
if (!taxId) { return ''; }
var value = taxId.toString().replace(/^\+/, '');
if (value.match(/[^0-9]/)) {
return taxId;
}
if (type.toLowerCase() == "fein") {
if (value.length == 10) {
value = value.slice(0, 2) + "-" + value.slice(2, value.length - 1);
return value;
} else if (value.length > 2) {
return (value.slice(0, 2) + "-" + value.slice(2, value.length));
}
else {
return value.slice(0, 9);
}
}
else if(type.toLowerCase() == "ssn"){
if (value.length > 5) {
return (value.slice(0,3) + "-" + value.slice(3,5) + "-" + value.slice(5,value.length));
}
else if (value.length > 3) {
return (value.slice(0, 3) + "-" + value.slice(3, value.length));
}
else {
return value;
}
}
};
});
我能够成功格式化 SSN。但是掩盖我做不到。我浏览了以下有关屏蔽的链接，但无济于事。我需要编写特殊函数来屏蔽和取消屏蔽指令中的“模糊”和“焦点”。 最后 ng-model 应包含值“999993213”，但 UI 中的值应显示为“*--3213”(格式和掩码)。
感谢您的投入。谢谢。
最佳答案
这应该有效。
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>关于javascript - Angular js中的SSN掩码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34645799/