Angular.js组件之input mask对input输入进行格式化详解

2024-02-15 11:30:04 44

前言

最近因为项目的需要，经常有一些对input输入进行格式化的需求，以前做的时候在js中写指令进行处理，但是这样又要在js或者在java代码中将请求的数据进行还原，很是麻烦，于是在网上看到了jquery的inputmask组件，觉得很好用，在项目中写出指令，用起来很方便。

方法如下：

在项目中引入jquery和jquery-inputmask，然后在项目中写指令，如下：

define(['./module'],function(directives){
'usestrict';
directives.directive('inputMask',function($timeout){
return{
restrict:'EA',
require:'ngModel',
link:function(scope,elm,attrs,ngModel){
varapplyModelEvents=["oncomplete","onKeyUp","onKeyValidation"],maskType="mask";

if(attrs.formatOption){
varformatOption=scope.$eval(attrs.formatOption);
if(formatOption.parser){
ngModel.$parsers.push(formatOption.parser);
}

if(formatOption.formatter){
ngModel.$formatters.push(formatOption.formatter);
}

if(formatOption.isEmpty){
ngModel.$isEmpty=formatOption.isEmpty;
}
}

varapplyModel=function(fun){
returnfunction(){
(function(args){
$timeout(function(){
varviewValue=elm.inputmask('unmaskedvalue');
if(viewValue!==ngModel.$viewValue){
ngModel.$setViewValue(viewValue);
}
if(fun){
fun.apply(scope,args);
}
});
})(Array.prototype.slice.call(arguments));
};
};

varextendOption=function(option){
varnewOption=angular.extend({},option);
angular.forEach(applyModelEvents,function(key){
newOption[key]=applyModel(newOption[key]);
});

returnnewOption;
};

if(attrs.inputMask){
maskType=scope.$eval(attrs.inputMask);
}

if(maskType){
if(angular.isObject(maskType)){
varmaskOption=extendOption(maskType);
$timeout(function(){
elm.inputmask(maskOption);
});
}else{
varmaskOption=extendOption(scope.$eval(attrs.maskOption)||{});
$timeout(function(){
elm.inputmask(maskType,maskOption);
});
}
}

elm.bind("blur",function(){
$timeout(function(){
if(attrs.isMask){

}else{
ngModel.$setViewValue(elm.inputmask('unmaskedvalue'));
}
});
});

}
}
});
});

如需要将银行卡号按银行卡格式显示：

html:

angularcontroller中cardOption：

$scope.cardOption={
mask:function(){
return["9999999999999999[999]"];
}};

如果日期表示的时候，将string直接转为data类型：

$scope.dateFormatOption={
parser:function(viewValue){
returnviewValue?newDate(viewValue):undefined;
},
formatter:function(modelValue){
if(!modelValue){
return"";
}
vardate=newDate(modelValue);
return(date.getFullYear()+"-"+date.getMonth()+"-"+date.getDate()).replace(/\b(\d)\b/g,"0$1");
},
isEmpty:function(modelValue){
return!modelValue;
}
};

html代码：

另外，指令中的一些属性需要注意：

inputMask主要是制定页面展示的样式：如展示银行卡号的例子；

1、format-option主要是指定在格式化的时候解析、格式化和为空的时候，数据的格式；如日期处理，最后进行请求的时候就是传入data类型；

2、isMask主要是指定页面展示的是否是传入后台请求的数据，如卡号解析为XXXXXXXXXXXXXXXX，如果isMask为true则传入后台则为XXXXXXXXXXXXXXXX，否则为XXXXXXXXXXXXXXXX。

3、maskOption:指定页面展示的样式，同时也可以用回调，在完成和验证的时候做一些处理动作。如下：

$scope.testoption={
"mask":"99-9999999",
"oncomplete":function(){
console.log();
console.log(arguments,"oncomplete!thislogformcontroler");
},
"onKeyValidation":function(){
console.log("onKeyValidationeventhappend!thislogformcontroler");
}
}

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对毛票票的支持。

Angular.js组件之input mask对input输入进行格式化详解

热门推荐

随机推荐