今天將奉獻(xiàn)一個(gè)在在幾個(gè)angularjs項(xiàng)目中抽離的angular組件 input mask。在我們開發(fā)中經(jīng)常會(huì)對(duì)用戶的輸入進(jìn)行控制，比如日期，貨幣格式，或者純數(shù)字格式之類的限制，這就是input mask的使用場(chǎng)景，在項(xiàng)目中也是會(huì)經(jīng)常被提及需的需求之一。

當(dāng)然在官方的angular-ui ui-utils中有一個(gè)相應(yīng)的組件叫做ui-mask，但是其mask功能是很初級(jí)脆弱的。所以我希望能得到一個(gè)更強(qiáng)大的mask組件。我所知的jquery.inputmask就是這樣一個(gè)我所期望的強(qiáng)大的mask組件，所以我不必再去重造輪子，好的軟件就是為了不停被重復(fù)利用。所以寫了一個(gè)adapter，https://github.com/greengerong/green.inputmask4angular.

其使用如下，可以去下載項(xiàng)目查看其中的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的簡(jiǎn)單實(shí)用方式，更復(fù)雜的方式請(qǐng)移步到j(luò)query.inputmask查看。

轉(zhuǎn)載于:https://www.cnblogs.com/whitewolf/p/3475687.html

總結(jié)

以上是生活随笔為你收集整理的angularjs组件之input mask的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。