Preface
Recently, due to the needs of projects, there are often some demands to format input input. In the past, I wrote instructions in JS for processing, but in this way, I had to restore the requested data in JS or Java code, which was very troublesome. So I saw the inputmask component of jquery on the Internet. I thought it was very useful and wrote instructions in the project, which was very convenient to use.
The method is as follows:
Introduce jquery and jquery-inputmask in the project, and then write instructions in the project, as follows:
define(['./module'], function (directives) {
'use strict';
('inputMask', function ($timeout) {
return {
restrict: 'EA',
require: 'ngModel',
link: function (scope, elm, attrs, ngModel) {
var applyModelEvents = [ "oncomplete", "onKeyUp", "onKeyValidation" ], maskType = "mask";
if () {
var formatOption = scope.$eval();
if () {
ngModel.$();
}
if () {
ngModel.$();
}
if () {
ngModel.$isEmpty = ;
}
}
var applyModel = function (fun) {
return function () {
(function (args) {
$timeout(function () {
var viewValue = ('unmaskedvalue');
if (viewValue !== ngModel.$viewValue) {
ngModel.$setViewValue(viewValue);
}
if (fun) {
(scope, args);
}
});
})((arguments));
};
};
var extendOption = function (option) {
var newOption = ({}, option);
(applyModelEvents, function (key) {
newOption[key] = applyModel(newOption[key]);
});
return newOption;
};
if () {
maskType = scope.$eval();
}
if (maskType) {
if ((maskType)) {
var maskOption = extendOption(maskType);
$timeout(function () {
(maskOption);
});
} else {
var maskOption = extendOption(scope.$eval() || {});
$timeout(function () {
(maskType, maskOption);
});
}
}
("blur", function(){
$timeout(function () {
if(){
}else{
ngModel.$setViewValue(('unmaskedvalue'));
}
});
});
}
}
});
});
If you need to display the bank card number in the bank card format:
html:
<input class="form-control" name="cardNo" type="text" ng-model="cardNo" input-mask="cardOption"/>
cardOption in angular controller:
$ = {
mask: function () {
return ["9999 9999 9999 9999 [999]"];
}};
If the date is represented, convert the string directly to the data type:
$ = {
parser: function (viewValue) {
return viewValue ? new Date(viewValue) : undefined;
},
formatter: function (modelValue) {
if (!modelValue) {
return "";
}
var date = new Date(modelValue);
return (() + "-" + () + "-" + ()).replace(/\b(\d)\b/g, "0$1");
},
isEmpty: function (modelValue) {
return !modelValue;
}
};
html code:
<input type="text" ng-model="test1" input-mask="'y-m-d'" format-option="dateFormatOption"/>
In addition, some properties in the directive need to be paid attention to:
inputMask mainly formulates the style of page display: such as an example of displaying bank card numbers;
1. format-option mainly specifies the format of data when parsing, formatting and emptying when formatting; such as date processing, the data type is passed in when the request is finally made;
2. isMask mainly specifies whether the data displayed on the page is transmitted to the background request. For example, the card number is parsed as XXXXXXXXXXXX. If isMask is true, the incoming background is XXXXXXXXXXXXXXXX, otherwise it is XXXXXXXXXXXXXXXXXXXXXX.
3. maskOption: Specify the style of the page display. You can also use callbacks to do some processing actions when completing and verifying. as follows:
$ = {
"mask": "99-9999999",
"oncomplete": function () {
();
(arguments,"oncomplete!this log form controler");
},
"onKeyValidation": function () {
("onKeyValidation event happend! this log form controler");
}
}
Summarize
The above is the entire content of this article. I hope the content of this article will be of some help to your study or work. If you have any questions, you can leave a message to communicate. Thank you for your support.