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


Posted in Javascript onJuly 10, 2017

前言

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

总结

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

Javascript 相关文章推荐
深入理解JavaScript系列(2) 揭秘命名函数表达式
Jan 15 Javascript
JavaScript设计模式之策略模式实例
Oct 10 Javascript
jQuery实现多级联动下拉列表查询框
Jan 18 Javascript
AngularJs html compiler详解及示例代码
Sep 01 Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
Oct 17 Javascript
JS判断两个对象内容是否相等的方法示例
Apr 10 Javascript
Express系列之multer上传的使用
Oct 27 Javascript
微信小程序实现的自定义分享功能示例
Feb 12 Javascript
gulp构建小程序的方法步骤
May 31 Javascript
JavaScript中如何对多维数组(矩阵)去重的实现
Dec 04 Javascript
React 实现车牌键盘的示例代码
Dec 20 Javascript
vue中实现点击变成全屏的多种方法
Sep 27 Javascript
underscore之Chaining_动力节点Java学院整理
Jul 10 #Javascript
Vue 2.0的数据依赖实现原理代码简析
Jul 10 #Javascript
Vue实现virtual-dom的原理简析
Jul 10 #Javascript
Vue2路由动画效果的实现代码
Jul 10 #Javascript
深入浅析Node.js单线程模型
Jul 10 #Javascript
require.js中的define函数详解
Jul 10 #Javascript
vue.js组件之间传递数据的方法
Jul 10 #Javascript
You might like
连接到txt文本的超链接,不直接打开而是点击后下载的处理方法
2009/07/01 PHP
PHP中new static() 和 new self() 的区别介绍
2015/01/09 PHP
用JavaScript和注册表脚本实现右键收藏Web页选中文本
2007/01/28 Javascript
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
2009/12/02 Javascript
3种不同方式的焦点图轮播特效分享
2013/10/30 Javascript
Javascript 命名空间模式
2013/11/01 Javascript
Nodejs极简入门教程(二):定时器
2014/10/25 NodeJs
jQuery遍历json的方法分析
2016/04/16 Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
2017/02/04 Javascript
原生JS实现图片翻书效果
2017/02/16 Javascript
移动端使用localResizeIMG4压缩图片
2017/04/22 Javascript
完美解决浏览器跨域的几种方法(汇总)
2017/05/08 Javascript
Vue中对比scoped css和css module的区别
2018/05/17 Javascript
JavaScript循环遍历你会用哪些之小结篇
2018/09/28 Javascript
vue中使用codemirror的实例详解
2018/11/01 Javascript
浅谈微信小程序列表埋点曝光指南
2019/10/15 Javascript
[02:17]DOTA2亚洲邀请赛 RAVE战队出场宣传片
2015/02/07 DOTA
用python实现的去除win下文本文件头部BOM的代码
2013/02/10 Python
python实现挑选出来100以内的质数
2015/03/24 Python
详解Python字符串对象的实现
2015/12/24 Python
用Python写一个自动木马程序
2019/09/17 Python
Python 找出出现次数超过数组长度一半的元素实例
2020/05/11 Python
利用html5 file api读取本地文件示例(如图片、PDF等)
2018/03/07 HTML / CSS
HTML5不支持标签和新增标签详解
2016/06/27 HTML / CSS
美赞臣营养马来西亚旗舰店:Enfagrow马来西亚
2019/07/26 全球购物
《老王》教学反思
2014/02/23 职场文书
生日宴会主持词
2014/03/20 职场文书
四群教育工作实施方案
2014/03/26 职场文书
环保建议书100字
2014/05/14 职场文书
中秋手机店促销方案
2014/06/16 职场文书
党员志愿者活动总结
2014/06/26 职场文书
2014年个人委托书范本
2014/10/13 职场文书
2014幼儿园家长工作总结
2014/11/10 职场文书
感恩节寄语2015
2015/03/24 职场文书
反邪教观后感
2015/06/11 职场文书
读《儒林外史》有感:少一些功利,多一些真诚
2020/01/19 职场文书