今天将奉献一个在在几个angularjs项目中抽离的angular组件 input mask。在我们开发中经常会对用户的输入进行控制,比如日期,货币格式,或者纯数字格式之类的限制,这就是input mask的使用场景,在项目中也是会经常被提及需的需求之一。

当然在官方的angular-ui ui-utils中有一个相应的组件叫做ui-mask,但是其mask功能是很初级脆弱的。所以我希望能得到一个更强大的mask组件。我所知的jquery.inputmask就是这样一个我所期望的强大的mask组件,所以我不必再去重造轮子,好的软件就是为了不停被重复利用。所以写了一个adapter,https://github.com/greengerong/green.inputmask4angular.

其使用如下,可以去下载项目查看其中的demo page。

<div class="hero-unit">
<h1>'Allo, 'Allo!</h1> <div>
<h3>mask</h3>
<p>Mask: 99-9999999</p>
<input type="text" ng-model="test" input-mask="'mask'" mask-option="testoption"/>
<pre>{{ test | json }}</pre>
</div> <div>
<h3>y-m-d</h3>
<p>Date: yyyy-MM-dd</p>
<input type="text" ng-model="test1" input-mask="'y-m-d'" format-option="dateFormatOption"/>
<pre>{{ test1 | json }}</pre>
</div> <div>
<h3>Regex</h3>
<p>Email: "[a-zA-Z0-9._%-]+@[a-zA-Z0-9-]+\\.[a-zA-Z]{2,4}"</p>
<input type="text" ng-model="test3" input-mask="'Regex'"
mask-option="regexOption"/>
<pre>{{ test3 | json }}</pre>
</div> <div>
<h3>Function</h3>
<p>"[1-]AAA-999" or "[1-]999-AAA"</p>
<input type="text" ng-model="test4" input-mask="functionOption"/>
<pre>{{ test4 | json }}</pre>
</div> </div>

  

controller code:

'use strict';

    angular.module('green.inputmaskApp')
.controller('MainCtrl', ["$scope", function ($scope) { $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");
}
} //default value
$scope.test1 = new Date(); $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;
}
}; $scope.mask = { regex: ["999.999", "aa-aa-aa"]}; $scope.regexOption = {
regex: "[a-zA-Z0-9._%-]+@[a-zA-Z0-9-]+\\.[a-zA-Z]{2,4}"
}; $scope.functionOption = {
mask: function () {
return ["[1-]AAA-999", "[1-]999-AAA"];
}}; }]);

  

这里值列列举了jquery.inputmask的简单实用方式,更复杂的方式请移步到jquery.inputmask查看。

angularjs组件之input mask的更多相关文章

  1. angular中父组件给子组件传值-@input

    1. 父组件调用子组件的时候传入数据 <app-header [msg]="msg"></app-header> 2. 子组件引入 Input 模块 imp ...

  2. 微信小程序优化:实现picker组件中input输入框禁止输入,而只能通过picker组件选择日期

    原来的代码如下: <view class="right">     <picker mode="date" value="{{mat ...

  3. angular4自定义组件非input元素实现ngModel双向数据绑定

    在angular里我们一般都是给input元素添加[(ngModel)]="value"实现数据双向绑定,如果想实现自定义的组件上实现ngModel双向数据绑定应该怎么办呐... ...

  4. 使用模块定义AngularJS组件

    一.模块创建/查找 module 当创建一个模块时,必须指定name和requires参数,即使你的模块并不存在依赖 var myApp=angular.module("exampleApp ...

  5. 从0搭建vue3组件库: Input组件

    本篇文章将为我们的组件库添加一个新成员:Input组件.其中Input组件要实现的功能有: 基础用法 禁用状态 尺寸大小 输入长度 可清空 密码框 带Icon的输入框 文本域 自适应文本高度的文本域 ...

  6. angularjs中使用 <input type="file">标签实现一次最多上传5张图片

    前期准备: 1.angular.js 2.bootstrap.css 具体如何实现呢?请看下面代码哈哈哈. 在angular项目中,如果要给<input type="file" ...

  7. vue 组件 模板input双向数据数据

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>T ...

  8. [Angular HTML] Implementing The Input Mask Cursor Navigation Functionality -- setSelectionRange

    @HostListener('keydown', ['$event', '$event.keyCode']) onKeyDown($event: KeyboardEvent, keyCode) { i ...

  9. 一篇文章看懂angularjs component组件

     壹 ❀ 引 我在 angularjs 一篇文章看懂自定义指令directive 一文中详细介绍了directive基本用法与完整属性介绍.directive是个很神奇的存在,你可以不设置templa ...

随机推荐

  1. iOS动画实现改变frme和contenOffset

    [UIView beginAnimations:nil context:nil];    [UIView setAnimationDuration:0.4];    [UIView setAnimat ...

  2. JavaScript 三个组成部分

    1.核心(ECMAScript) ECMAScript 仅仅是一个描述,定义了脚本语言的所有属性.方法和对象.其他语言可以实现 ECMAScript 来作为功能的基准,JavaScript 就是这样: ...

  3. JavaScript常用函数之Eval()使用

    eval() 功能:首先解释Javascript代码  然后执行它 用法:Eval(codeString) codeString是包含有javascript语句的字符串,在eval之后使用Javasc ...

  4. 轮播神器swiper插件

    Swiper中文网:http://www.swiper.com.cn/ Swiper- 是免费的,最现代化的移动触摸滑块硬件加速的转换和惊人的天然行为.它的目的是在移动网站,移动网络应用和移动本地/混 ...

  5. 通过统计用户DNS解析记录,实现监控用户上网行为

    上次通过扫描抓包分析TTL的方式检测公司网络开放的端口,发现没有开放53端口(DNS),也就是在公司内部的主机只能用服务器自动分配的DNS,并且发现这是台内部服务器.今天发现bing上不去,检测后发现 ...

  6. css3 自定义动画(1)

    <style> /*@-webkit-keyframes 动画名称 {} 用时:-webkit-animation:时间 动画名称; */ /* @-webkit-keyframes mo ...

  7. STM32移植RT-Thread的串口只能接收一个字节数据的问题

    打开设备的函数参数要与注册设备函数参数要一致, 注册设备的函数及其参数如下: /* register UART1 device */ rt_hw_serial_register(&serial ...

  8. CentOS 访问Windows7共享文件夹

    在终端中输入命令mount -t cifs -o username="xxx",password="****" //192.168.1.1/share_fold ...

  9. Ubuntu 12.04 安装MySQL

    本文地址:http://www.cnblogs.com/yhLinux/p/4012689.html 本文适合新手入门. 本文是对 Ubuntu 12.04 环境下安装 MySQL 的记录,通过这两天 ...

  10. 置入式模型inclusion model和显示具现化

    1.置入式模型 链接错误: 大多数非模板程序代码的组织如下:A,类声明在头文件中: B:全局变量和非inline函数在cpp文件中定义 但是,如果模板程序也这样组织,则会出错.原因在于:函数模板的定义 ...