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

前言

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

方法如下：

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

define(['./module'], function (directives) {
 'use strict';
 directives.directive('inputmask', function ($timeout) {
 return {
  restrict: 'ea',
  require: 'ngmodel',
  link: function (scope, elm, attrs, ngmodel) {
  var applymodelevents = [ "oncomplete", "onkeyup", "onkeyvalidation" ], masktype = "mask";

  if (attrs.formatoption) {
   var formatoption = 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;
   }
  }

  var applymodel = function (fun) {
   return function () {
   (function (args) {
    $timeout(function () {
    var viewvalue = elm.inputmask('unmaskedvalue');
    if (viewvalue !== ngmodel.$viewvalue) {
     ngmodel.$setviewvalue(viewvalue);
    }
    if (fun) {
     fun.apply(scope, args);
    }
    });
   })(array.prototype.slice.call(arguments));
   };
  };

  var extendoption = function (option) {
   var newoption = angular.extend({}, option);
   angular.foreach(applymodelevents, function (key) {
   newoption[key] = applymodel(newoption[key]);
   });

   return newoption;
  };

  if (attrs.inputmask) {
   masktype = scope.$eval(attrs.inputmask);
  }

  if (masktype) {
   if (angular.isobject(masktype)) {
   var maskoption = extendoption(masktype);
   $timeout(function () {
    elm.inputmask(maskoption);
   });
   } else {
   var maskoption = 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:

<input class="form-control" id="cardno" name="cardno" type="text" ng-model="cardno" input-mask="cardoption"/>

angular controller中cardoption：

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

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

$scope.dateformatoption = {
   parser: function (viewvalue) {
   return viewvalue ? new date(viewvalue) : undefined;
   },
   formatter: function (modelvalue) {
   if (!modelvalue) {
    return "";
   }
   var date = new date(modelvalue);
   return (date.getfullyear() + "-" + date.getmonth() + "-" + date.getdate()).replace(/\b(\d)\b/g, "0$1");
   },
   isempty: function (modelvalue) {
   return !modelvalue;
   }
  };

html代码：

<input type="text" ng-model="test1" input-mask="'y-m-d'" format-option="dateformatoption"/>

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

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

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

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

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

$scope.testoption = {
  "mask": "99-9999999",
  "oncomplete": function () {
   console.log();
   console.log(arguments,"oncomplete!this log form controler");
  },
  "onkeyvalidation": function () {
   console.log("onkeyvalidation event happend! this log form controler");
  }
  }

总结

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