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 相关文章推荐
Dom 结点创建 基础知识
Oct 01 Javascript
关于JS管理作用域的问题
Apr 10 Javascript
JS获得URL超链接的参数值实例代码
Jun 21 Javascript
ExtJS判断IE浏览器类型的方法
Feb 10 Javascript
JS简单限制textarea内输入字符数量的方法
Oct 14 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
Mar 07 Javascript
深入浅析Bootstrap列表组组件
May 03 Javascript
jquery select2的使用心得(推荐)
Dec 04 Javascript
vue中$refs的用法及作用详解
Apr 24 Javascript
vue.js做一个简单的编辑菜谱功能
May 08 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
May 23 Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
May 29 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
xml+php动态载入与分页
2006/10/09 PHP
解析PHP中的内存管理,PHP动态分配和释放内存
2013/06/28 PHP
跟我学Laravel之路由
2014/10/15 PHP
Yii2中关联查询简单用法示例
2016/08/10 PHP
php使用str_shuffle()函数生成随机字符串的方法分析
2017/02/17 PHP
精通Javascript系列之数值计算
2011/06/07 Javascript
jquery实现用户信息修改验证输入方法汇总
2015/07/18 Javascript
基于JQuery实现图片上传预览与删除操作
2016/05/24 Javascript
javascript动画之模拟拖拽效果篇
2016/09/26 Javascript
vue利用better-scroll实现轮播图与页面滚动详解
2017/10/20 Javascript
js实现Tab选项卡切换效果
2020/07/17 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
2018/04/01 Javascript
微信小程序中使用ECharts 异步加载数据的方法
2018/06/27 Javascript
JS隐藏号码中间4位代码实例
2019/04/09 Javascript
vue项目添加多页面配置的步骤详解
2019/05/22 Javascript
[01:13]DOTA2群星解读国服召集令 一起说出回归的理由
2013/07/17 DOTA
[44:40]Serenity vs Pain 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python GUI实例学习
2017/11/21 Python
python高效过滤出文件夹下指定文件名结尾的文件实例
2018/10/21 Python
django echarts饼图数据动态加载的实例
2019/08/12 Python
Python将主机名转换为IP地址的方法
2019/08/14 Python
使用TFRecord存取多个数据案例
2020/02/17 Python
Keras—embedding嵌入层的用法详解
2020/06/10 Python
Restful_framework视图组件代码实例解析
2020/11/17 Python
成教自我鉴定
2013/10/27 职场文书
大学生毕业自我鉴定
2013/11/06 职场文书
业务主管岗位职责
2013/11/20 职场文书
资源环境与城市管理专业推荐信
2013/11/30 职场文书
幼儿园教师请假制度
2014/01/16 职场文书
旅游个人求职信范文
2014/01/30 职场文书
酒店总经理助理职责
2014/02/12 职场文书
《在家里》教后反思
2014/03/01 职场文书
Python快速实现一键抠图功能的全过程
2021/06/29 Python
SpringBoot实现quartz定时任务可视化管理功能
2021/08/30 Java/Android
JavaScript小技巧带你提升你的代码技能
2021/09/15 Javascript
Python 数据可视化之Matplotlib详解
2021/11/02 Python