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实现表格排序方法
Jun 14 Javascript
JavaScript中setAttribute用法介绍
Jul 20 Javascript
jQuery表格插件datatables用法总结
Sep 05 Javascript
JavaScript动态数量的文件上传控件
Nov 18 Javascript
Vue实现双向绑定的方法
Dec 22 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
Jan 18 Javascript
Angularjs中ng-repeat的简单实例
Aug 25 Javascript
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
基于Webpack4和React hooks搭建项目的方法
Feb 05 Javascript
JS图片预加载三种实现方法解析
May 08 Javascript
小程序实现多个选项卡切换
Jun 19 Javascript
vue-router定义元信息meta操作
Dec 07 Vue.js
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
Memcache 在PHP中的使用技巧
2010/02/08 PHP
php导入导出excel实例
2013/10/25 PHP
Yii框架的路由配置方法分析
2019/09/09 PHP
为Extjs加加速(javascript加速)
2010/08/19 Javascript
原来Jquery.load的方法可以一直load下去
2011/03/28 Javascript
javascript对talbe进行动态添加、删除、验证实现代码
2012/03/29 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
2013/11/29 Javascript
使用jQuery不判断浏览器高度解决iframe自适应高度问题
2014/12/16 Javascript
温习Javascript基础语法之词法结构
2016/05/31 Javascript
jquery实时获取时间的简单实例
2017/01/26 Javascript
JS解析url查询参数的简单代码
2017/08/06 Javascript
js封装成插件_Canvas统计图插件编写实例
2017/09/12 Javascript
react实现一个优雅的图片占位模块组件详解
2017/10/30 Javascript
JavaScript设计模型Iterator实例解析
2020/01/22 Javascript
eslint+prettier统一代码风格的实现方法
2020/07/22 Javascript
vue 解决provide和inject响应的问题
2020/11/12 Javascript
python基础教程之获取本机ip数据包示例
2014/02/10 Python
python列出目录下指定文件与子目录的方法
2015/07/03 Python
Python星号*与**用法分析
2018/02/02 Python
python 实现将字典dict、列表list中的中文正常显示方法
2018/07/06 Python
详解Python 装饰器执行顺序迷思
2018/08/08 Python
Django restframework 源码分析之认证详解
2019/02/22 Python
如何为Python终端提供持久性历史记录
2019/09/03 Python
Python tkinter之Bind(绑定事件)的使用示例
2021/02/05 Python
Python爬虫+tkinter界面实现历史天气查询的思路详解
2021/02/22 Python
初中同学聚会邀请函
2014/02/03 职场文书
上班玩游戏检讨书
2014/02/07 职场文书
给老师的一封建议书
2014/03/13 职场文书
普通党员个人剖析材料
2014/10/08 职场文书
2014年护士工作总结范文
2014/11/11 职场文书
锅炉工岗位职责
2015/02/13 职场文书
总经理2015中秋节致辞
2015/07/29 职场文书
vue+echarts实现多条折线图
2022/03/21 Vue.js
Python利用capstone实现反汇编
2022/04/06 Python
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技
win10系统xps文件怎么打开?win10打开xps文件的两种操作方法
2022/07/23 数码科技