如何在输入上设置掩码
How to set mask on input
我 select 有信用卡类型和号码输入。为了验证数字,我使用 ng-patter?对于掩码,我想使用 jquery iputmask,但未设置掩码。
如何在 select 更改时动态设置掩码?
<div ng-controller="MyCtrl">
<h3>
With dynamic pattern
</h3>
<select ng-model="dataTypeValue" ng-options="t as t.label for t in dataTypeList" ng-change="getCustomPattern(MyForm.input)" >
</select>
<input type="text" ng-model="textValue.text" ng-pattern="getPattern()" name="input" placeholder="{{placeholder}}">
您可以使用 ui-mask.For ui-mask 属性使用您的自定义函数。
<input ng-model="maskDemo" ui-mask="'99-99-9999'">
你可以使用
jQuery-Mask-Plugin
它在 github
可用
您可以对代码进行一些修改以使其工作。这是一个示例工作解决方案。
我已经修改了掩码和模式值,您可能需要根据需要进行更改。
var myApp = angular.module('sampleApp', []);
myApp.controller("sampleController", function($scope) {
var tThis = this;
$scope.dataTypeList = [{
'id': 1,
"label": "VISA"
}, {
'id': 2,
"label": "MASTER"
}, {
'id': 3,
"label": "AMEX"
}];
$scope.defaultPattern = /[0-9]+/;
$scope.getPattern = function() {
return $scope.defaultPattern;
};
$scope.placeholder = '9999 0000 9999 9999';
$scope.mask = '9999 0000 9999 9999';
$scope.getPlaceholder = function() {
return $scope.placeholder;
};
var isParser = false;
$scope.getCustomPattern = function() {
var dataTypeId = $scope.dataTypeValue.id;
if (dataTypeId == 3) {
$scope.defaultPattern = /^[0-9]{4} [0-9]{4} [0-9]{4} [0-9]{3}$/;
$scope.placeholder = '9999 0000 9999 999';
$scope.mask = '9999 000 9999 999';
} else if (dataTypeId == 2) {
$scope.defaultPattern = /^[0-9]{4} [0-9]{4} [0-9]{4} [0-9]{4}$/;
$scope.placeholder = '9999 1111 9999 9999';
$scope.mask = '9999 1111 9999 99990';
} else {
$scope.defaultPattern = /^[0-9]{4} [0-9]{4} [0-9]{4} [0-9]{4}$/;
$scope.placeholder = '9999 2222 9999 9999';
$scope.mask = '9999 2222 9999 99990';
}
return $scope.defaultPattern;
};
})
.directive('creditcard', function() {
var directive = {
scope: {
inputMask: '@'
},
link: link,
require: 'ngModel',
restrict: 'A'
};
return directive;
function link($scope, el, attrs, model) {
$scope.$watch(function() {
return $scope.inputMask;
}, function(newValue, oldValue) {
$(el).inputmask({
mask: newValue
});
})
$(el).inputmask({
mask: attrs.inputMask
});
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.3/jquery.inputmask.bundle.js"></script>
<div ng-app="sampleApp">
<div ng-controller="sampleController">
<h3>
With dynamic pattern
</h3>
<select ng-model="dataTypeValue" ng-options="t as t.label for t in dataTypeList" ng-change="getCustomPattern()">
</select>
<input type="text" ng-model="textValue.text" ng-pattern="{{pattern}}" name="input" placeholder="{{placeholder}}" input-mask="{{mask}}" creditcard>
</div>
</div>
我 select 有信用卡类型和号码输入。为了验证数字,我使用 ng-patter?对于掩码,我想使用 jquery iputmask,但未设置掩码。 如何在 select 更改时动态设置掩码?
<div ng-controller="MyCtrl">
<h3>
With dynamic pattern
</h3>
<select ng-model="dataTypeValue" ng-options="t as t.label for t in dataTypeList" ng-change="getCustomPattern(MyForm.input)" >
</select>
<input type="text" ng-model="textValue.text" ng-pattern="getPattern()" name="input" placeholder="{{placeholder}}">
您可以使用 ui-mask.For ui-mask 属性使用您的自定义函数。
<input ng-model="maskDemo" ui-mask="'99-99-9999'">
你可以使用 jQuery-Mask-Plugin
它在 github
可用您可以对代码进行一些修改以使其工作。这是一个示例工作解决方案。
我已经修改了掩码和模式值,您可能需要根据需要进行更改。
var myApp = angular.module('sampleApp', []);
myApp.controller("sampleController", function($scope) {
var tThis = this;
$scope.dataTypeList = [{
'id': 1,
"label": "VISA"
}, {
'id': 2,
"label": "MASTER"
}, {
'id': 3,
"label": "AMEX"
}];
$scope.defaultPattern = /[0-9]+/;
$scope.getPattern = function() {
return $scope.defaultPattern;
};
$scope.placeholder = '9999 0000 9999 9999';
$scope.mask = '9999 0000 9999 9999';
$scope.getPlaceholder = function() {
return $scope.placeholder;
};
var isParser = false;
$scope.getCustomPattern = function() {
var dataTypeId = $scope.dataTypeValue.id;
if (dataTypeId == 3) {
$scope.defaultPattern = /^[0-9]{4} [0-9]{4} [0-9]{4} [0-9]{3}$/;
$scope.placeholder = '9999 0000 9999 999';
$scope.mask = '9999 000 9999 999';
} else if (dataTypeId == 2) {
$scope.defaultPattern = /^[0-9]{4} [0-9]{4} [0-9]{4} [0-9]{4}$/;
$scope.placeholder = '9999 1111 9999 9999';
$scope.mask = '9999 1111 9999 99990';
} else {
$scope.defaultPattern = /^[0-9]{4} [0-9]{4} [0-9]{4} [0-9]{4}$/;
$scope.placeholder = '9999 2222 9999 9999';
$scope.mask = '9999 2222 9999 99990';
}
return $scope.defaultPattern;
};
})
.directive('creditcard', function() {
var directive = {
scope: {
inputMask: '@'
},
link: link,
require: 'ngModel',
restrict: 'A'
};
return directive;
function link($scope, el, attrs, model) {
$scope.$watch(function() {
return $scope.inputMask;
}, function(newValue, oldValue) {
$(el).inputmask({
mask: newValue
});
})
$(el).inputmask({
mask: attrs.inputMask
});
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.3/jquery.inputmask.bundle.js"></script>
<div ng-app="sampleApp">
<div ng-controller="sampleController">
<h3>
With dynamic pattern
</h3>
<select ng-model="dataTypeValue" ng-options="t as t.label for t in dataTypeList" ng-change="getCustomPattern()">
</select>
<input type="text" ng-model="textValue.text" ng-pattern="{{pattern}}" name="input" placeholder="{{placeholder}}" input-mask="{{mask}}" creditcard>
</div>
</div>