SSN上的角度UI蒙版模糊
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了SSN上的角度UI蒙版模糊相关的知识，希望对你有一定的参考价值。
我使用angular-ui-mask作为SSN，初始ui-mask是“999-99-9999”，但在模糊时我需要将SSN 123-45-6789字符显示为XXX-XX-6789。
我尝试将ui-mask设置为XXX-XX-9999，但它显示的是“XXX-XX-”末尾SSN的前4位数字，而不是最后4位数字。
这是html代码
<input class="btnDropdown" id="phoneTextInput" ui-mask="{{uimaskpattern}}" ui-mask-placeholder-char=""
ng-focus="applymask()"
ng-blur="removemask(contact.contactDetails.attributeDetails.contact)"
md-minlength="10" md-maxlength="10" name="Phone_{{$index}}" ng-model="contact"
placeholder="">
这是Typescript代码
public applymask() {
this.uimaskpattern = "999-99-9999";
}
public removemask(ssn, ev) {
if (ssn) {
console.log(ssn);
this.uimaskpattern = "AAA-AA-9999";
}
}
答案
有一个名为jquery.maskedinput的jQuery插件可能对此有所帮助。
您可以使用此插件通过创建自定义指令并在其中调用库来屏蔽输入。这是一个工作示例，应该在输入字段失去焦点时屏蔽输入：
var app = angular.module('myapp', []);
app.controller('MainCtrl', function($scope) {
$scope.ssn = '';
});
app.directive("ssnMasker", function () {
return {
require: "ngModel",
link: function (scope, elem, attr, ngModel) {
$(elem).mask("999-99-9999"); // 9 represents a numeric character in this library
var temp;
var regxa = /^(d{3}-?d{2}-?d{4})$/; // regex to define formatting for a SSN
$(elem).focusin(function () {
$(elem).val(temp);
});
$(elem).on("blur",function () {
temp = $(elem).val();
if (regxa.test($(elem).val())) { // check for match
$(elem).val("XXX-XX" + temp.slice(6)); // change displayed value
}
});
}
}
});<!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">
Type SSN: <input type="text" ng-model="ssn" ssn-masker >
<p>Actual SSN: {{ ssn }} </p>
</body>
</html>另一答案
这可能也是一种尝试的方法 - 虽然它是Angular 1.x风格 - 所以可能有更多的当前/ Angular 2方法来做到这一点。
HTML
<input type="text"
ng-model="data.ssnDisplay"
ng-blur="blurFunction()">
javascript
// on page load
if (newUser === true) {
$scope.data.ssn = ''
}
else {
// would normally be delivered via a service endpoint (hard coded here)
$scope.data.ssn = '123456789'
}
// create display-only property
$scope.data.ssnDisplay = $scope.data.ssn;
// on blur, update display-only property
$scope.blurFunction = function () {
$scope.data.ssnDisplay = 'XXXXX' + $scope.data.ssn.substring(5);
}
// always maintain primary ssn value - you'll need this when
// posting/saving your data back to your database
$scope.$watch("data.ssnDisplay", function () {
$scope.data.ssn = $scope.data.ssnDisplay;
})
以上是关于SSN上的角度UI蒙版模糊的主要内容，如果未能解决你的问题，请参考以下文章
使用 angular-ui-mask 时屏蔽 SSN 的前 5 个字符
通过使用指令模糊和加载表单上的角度数字格式，也不应该格式化 formControl 数据
无符号字符图像上的快速高斯模糊 - ARM Neon Intrinsics - iOS Dev