如何在输入上设置掩码答案

【问题标题】：How to set mask on input如何在输入上设置掩码
【发布时间】：2016-11-02 05:45:02
【问题描述】：

我选择了信用卡类型并输入了数字。为了验证数字，我使用 ng-patter？对于掩码，我想使用 jquery iputmask，但未设置掩码。如何在选择更改时设置动态设置掩码？

<div ng-controller="MyCtrl">

<h3>
 With dynamic pattern
</h3>
<select ng-model="dataTypeValue" ng-options="t as t.label for t in dataTypeList" ng-change="getCustomPattern(MyForm.input)" >

</select>

<input type="text"  ng-model="textValue.text" ng-pattern="getPattern()" name="input" placeholder="{{placeholder}}">

My example

【问题讨论】：

标签： jquery angularjs ng-pattern jquery-inputmask

【解决方案1】：

您可以使用 ui-mask。对于 ui-mask 属性，请使用您的自定义函数。

<input ng-model="maskDemo" ui-mask="'99-99-9999'">

【讨论】：

【解决方案2】：

您可以对代码进行一些修改以使其正常工作。这是一个示例工作解决方案。

我已经修改了掩码和模式值，您可能需要根据需要进行更改。

var myApp = angular.module('sampleApp', []);

myApp.controller("sampleController", function($scope) {
    var tThis = this;
    $scope.dataTypeList = [{
      'id': 1,
      "label": "VISA"
    }, {
      'id': 2,
      "label": "MASTER"
    }, {
      'id': 3,
      "label": "AMEX"
    }];

    $scope.defaultPattern = /[0-9]+/;
    $scope.getPattern = function() {
      return $scope.defaultPattern;
    };
    $scope.placeholder = '9999 0000 9999 9999';
    $scope.mask = '9999 0000 9999 9999';
    $scope.getPlaceholder = function() {
      return $scope.placeholder;
    };
    var isParser = false;
    $scope.getCustomPattern = function() {

      var dataTypeId = $scope.dataTypeValue.id;
      if (dataTypeId == 3) {
        $scope.defaultPattern = /^[0-9]{4} [0-9]{4} [0-9]{4} [0-9]{3}$/;
        $scope.placeholder = '9999 0000 9999 999';
        $scope.mask = '9999 000 9999 999';
      } else if (dataTypeId == 2) {
        $scope.defaultPattern = /^[0-9]{4} [0-9]{4} [0-9]{4} [0-9]{4}$/;
        $scope.placeholder = '9999 1111 9999 9999';
        $scope.mask = '9999 1111 9999 99990';
      } else {
        $scope.defaultPattern = /^[0-9]{4} [0-9]{4} [0-9]{4} [0-9]{4}$/;
        $scope.placeholder = '9999 2222 9999 9999';
        $scope.mask = '9999 2222 9999 99990';
      }

      return $scope.defaultPattern;
    };
  })
  .directive('creditcard', function() {
    var directive = {
      scope: {
        inputMask: '@'
      },
      link: link,
      require: 'ngModel',
      restrict: 'A'
    };
    return directive;

    function link($scope, el, attrs, model) {
      $scope.$watch(function() {
        return $scope.inputMask;
      }, function(newValue, oldValue) {
        $(el).inputmask({
          mask: newValue
        });
      })
      $(el).inputmask({
        mask: attrs.inputMask
      });
    }
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.3/jquery.inputmask.bundle.js"></script>
<div ng-app="sampleApp">
  <div ng-controller="sampleController">

    <h3>
 With dynamic pattern
</h3>
    <select ng-model="dataTypeValue" ng-options="t as t.label for t in dataTypeList" ng-change="getCustomPattern()">

    </select>

    <input type="text" ng-model="textValue.text" ng-pattern="{{pattern}}" name="input" placeholder="{{placeholder}}" input-mask="{{mask}}" creditcard>
  </div>
</div>

【讨论】：

【解决方案3】：

你可以使用 jQuery-Mask-Plugin

它在 github 上可用

【讨论】：