angularjs组件之input mask

今天将奉献一个在在几个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。


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

<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:


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

'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查看。

作者：破  狼 
出处：http://www.cnblogs.com/whitewolf/ 
本文版权归作者，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。该文章也同时发布在我的独立博客中-个人独立博客、博客园--破狼和51CTO--破狼。http://www.cnblogs.com/whitewolf/p/3475687.html

时间： 2025-01-30 17:58:54

angularjs组件之input mask的相关文章

ui组件之input多选下拉实现方法（带有搜索功能）_jquery

我的风格,先上效果图,如果大家感觉还不错,请参考实现代码. 废话不说 先看div层次结构 <!-- 最外层div 可以任意指定 主要用于定义子元素宽度 --> <div class="col-xs-10" style="width:800px"> <!-- 表单label 添加文字提示 --> <label for="" class="label-control">全文检索<

AngularJS number input 的双向绑定例子

莫名失效的双向绑定 来自于开发中偶然遇到的一个问题,看下面的例子: <div ng-app>    <div ng-controller="TodoCtrl">       <input type="number" ng-model="value"  size="30" >       <input type="button" ng-click="chan

AngularJS之WebAPi上传（十）

前言 前面一系列我们纯粹是讲AngularJS,在讲一门知识时我们应该结合之前所学综合起来来做一个小的例子,前面我们讲了在MVC中上传文件的例子,在本节我们讲讲如何利用AngularJS在WebAPi中如何上传,来巩固下WebAPi并结合AngularJS中对应的一些组件学习下. AngularJS Upload Files for WebAPi (一)在WebAPi中我们如何获得上传本地文件的物理路径呢?需要实现此类: MultipartFormDataStreamProvider ,从该类中

AngularJS之代码风格36条建议【一】（九）

前言 其实在新学一门知识时,我们应该注意下怎么书写代码更加规范,从开始就注意养成一个良好的习惯无论是对于bug的查找还是走人后别人熟悉代码都是非常好的,利人利己的事情何乐而不为呢,关于AngularJS中的代码风格分为几节来阐述.希望对打算学习AngularJS的新手或者已经在路上的老手有那么一丢丢的帮助也是可以的. 普遍规则 tips 01(定义一个组件脚本文件时,建议此文件的代码少于400行) (1)有利于单元测试和模拟测试. (2)增加可读性.可维护性.避免和团队在源代码控制上的冲突. (

Vuejs——（８~13）组件（从不懂到精通）

本篇资料来于官方文档: http://cn.vuejs.org/guide/components.html 本文是在官方文档的基础上,更加细致的说明,代码更多更全. 简单来说,更适合新手阅读 (二十五)组件的定义 ①组件的作用: [1]扩展HTML元素,封装可重用的代码: [2]组件是自定义元素,Vuejs的编译器可以为其添加特殊的功能: [3]某些情况下,组件可以是原生HTML元素的形式,以is的方式扩展.   ②写一个标准的组件: 分为以下几步: [1]挂载组件的地方,需要是Vue实例所渲染

iOS组件封装与自动布局自定义表情键盘_IOS

下面的东西是编写自定义的表情键盘,话不多说,开门见山吧!下面主要用到的知识有MVC, iOS开发中的自动布局,自定义组件的封装与使用,Block回调,CoreData的使用.有的小伙伴可能会问写一个自定义表情键盘肿么这么麻烦?下面 将会介绍我们如何用上面提到的东西来定义我们的表情键盘的.下面的内容会比较多,这篇文章还是比较有料的. 还是那句话写技术博客是少不了代码的,下面会结合代码来回顾一下iOS的知识,本篇博文中用到的知识点在前面的博客中都能找到相应的内容,本篇 算是一个小小的功能整合.先来张

vue中的组件

什么是组件 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展 使用组件 注册 我们可以通过以下方式创建一个Vue实例: new Vue({ el: '#some-element', // 选项 }) 要注册一个全局组件,可以使用Vue.component(tagName, options).例如: Vue.co

HTML &lt;label&gt; 提升&lt;input&gt;用户体验

如果没有 <label> 当然也能显示 <input> 的本文, 比如 <input type="radio" name="status" checked="true" value="0"/>改造前 <input type="radio" name="status" value="2"/>改造后 <input ty

9种改善AngularJS性能的方法

AngularJS 是目前使用非常广泛的 web app 应用框架,随着它的受欢迎程度持续上升 ,期待已久的AngularJS 4.0 诞生了.尽管已经做了很多优化,但几乎每个 Angular 专家仍然在处理使用 AngularJS 中出现的各种各样的问题. 目前,企业使用Web技术用在他们各自项目上,在线业务因此受到了极大影响.因此,有必要深入挖掘影响企业成长的各种因素. 但是,有可能不正确地使用 AngularJS 方法会影响你的应用程序在市场上的排名,因此 AngularJS 性能优化成为