欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-11-26 14:22:58
前言 最近因为项目的需要,经常有一些对input输入进行格式化的需求,以前做的时候在js中写指令进行处理,但是这样又要在js或者在java代码中将请求的数据进行还原,很是...

前言

最近因为项目的需要,经常有一些对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");
  }
  }

总结

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