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 相关文章推荐
jQuery html()等方法介绍
Nov 18 Javascript
用jquery与css打造个性化的单选框和复选框
Oct 20 Javascript
15个款优秀的 jQuery 图片特效插件推荐
Nov 21 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
Jul 13 Javascript
js正则表达式验证邮件地址
Nov 12 Javascript
Javascript实现单例模式
Jan 24 Javascript
AngularJS ng-bind-html 指令详解及实例代码
Jul 30 Javascript
同步异步动态引入js文件的几种方法总结
Sep 23 Javascript
Javascript面试经典套路reduce函数查重
Mar 23 Javascript
JS中Swiper的使用和轮播图效果
Aug 11 Javascript
基于wordpress的ajax写法详解
Jan 02 Javascript
js实现上传图片并显示图片名称
Dec 18 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
最新的php 文件上传模型,支持多文件上传
2009/08/13 PHP
ie与session丢失(新窗口cookie丢失)实测及解决方案
2013/07/15 PHP
PHP的Socket通信之UDP通信实例
2015/07/02 PHP
阿里云PHP SMS短信服务验证码发送方法
2017/07/11 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
CI框架教程之优化验证码机制详解【验证码辅助函数】
2019/04/16 PHP
javascript 面向对象,实现namespace,class,继承,重载
2009/10/29 Javascript
Javascript学习笔记一 之 数据类型
2010/12/15 Javascript
js获得鼠标的坐标值的方法
2013/03/13 Javascript
js钢琴按钮波浪式图片排列效果代码分享
2015/08/26 Javascript
DIV+CSS+jQ实现省市联动可扩展
2016/06/22 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
2017/01/11 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
2017/11/14 Javascript
js module大战
2019/04/19 Javascript
nodejs nedb 封装库与使用方法示例
2020/02/06 NodeJs
[01:20:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第四场 8.26
2018/08/30 DOTA
Python字符串转换成浮点数函数分享
2015/07/24 Python
Django 限制用户访问频率的中间件的实现
2018/08/23 Python
对Python中DataFrame选择某列值为XX的行实例详解
2019/01/29 Python
PyQt QListWidget修改列表项item的行高方法
2019/06/20 Python
python字符串Intern机制详解
2019/07/01 Python
Python3变量与基本数据类型用法实例分析
2020/02/14 Python
解决Pytorch自定义层出现多Variable共享内存错误问题
2020/06/28 Python
opencv 形态学变换(开运算,闭运算,梯度运算)
2020/07/07 Python
Python爬虫代理池搭建的方法步骤
2020/09/28 Python
python实现磁盘日志清理的示例
2020/11/05 Python
利用CSS的Sass预处理器(框架)来制作居中效果
2016/03/10 HTML / CSS
Expedia瑞典官网:预订度假屋、酒店、汽车租赁、机票等
2021/01/23 全球购物
创业计划书撰写原则
2014/01/25 职场文书
个人现实表现材料
2014/02/04 职场文书
学校安全生产承诺书
2014/05/23 职场文书
反腐倡廉警示教育活动心得体会
2014/09/04 职场文书
节约用电通知
2015/04/25 职场文书
2016年党员干部廉政承诺书
2016/03/24 职场文书
PyQt5 QThread倒计时功能的实现代码
2021/04/02 Python
教你用Python爬取英雄联盟皮肤原画
2021/06/13 Python