Question

我们在angular-ui页面上有演示here。

想知道我们如何编写带有可选分机号码的掩码。

(999) 999-9999 ext. 999将进行必要的扩展。

Answer 1

我和你分享了同样的问题。此组件有一个完全未记录的可选字符功能。我只能通过阅读源代码找到它。

面具的解决方案是：

(999) 999-9999 ext. ?9?9?9

掩码中的问号会将下一个字符标记为可选。相信我，它有效。

很抱歉花了这么长时间才回答。

Answer 2

(999) 999-9999 ext. ?9?9?9

这样做会很好但是如果你想清除模糊并把面膜放回去那么你需要多一点，我就这样使用了

<input type='text'
  ng-model='customer.phone'
  ui-mask="{{phoneMask}}"
  ng-blur="removeMask()"
  ng-focus="placeMask()" />

在我的控制器中：

$scope.phoneMask= "(999) 999-9999 ext. ?9?9?9";
$scope.removeMask = function () {
   if ($scope.rep.phone.length === 10) {
        $scope.phoneMask= "(999) 999-9999";
    }
};
$scope.placeMask = function () {
  $scope.phoneMask= "(999) 999-9999 ext. ?9?9?9";
}

希望它会有所帮助！

Answer 3

两周后仍然没有答案。我认为所有人都同意这个AngularUI在处理这种情况时太有限了。

我最终使用jquery.inputmask（http://github.com/RobinHerbots/jquery.inputmask）。

我们一直在使用这个jQuery扩展库，因为没有Angular。它似乎仍然是最强大的输入掩码。至少它具有我需要的所有功能。

这是我的设置。

首先，当然是NuGet或下载库。当前版本（3.0.55）将函数分离为不同的js文件。（日期，数字，电话......）请务必包含您需要的所有内容。
为输入掩码属性或类创建指令。在此指令中使用link来使用jQuery应用输入掩码：

以下是代码：

(function(){
    'use strict';        
    var directiveId = 'myInputMask';
    angular.module('myApp')..directive(directiveId, function() {
        return {
            restrict: 'AC',
            link: function (scope, el, attrs) {
                el.inputmask(scope.$eval(attrs.myInputMask));
                el.on('change', function() {
                    scope.$eval(attrs.ngModel + "='" + el.val() + "'");
                    // or scope[attrs.ngModel] = el.val() if your expression doesn't contain dot.
                });
            }
        }
    });
})();

最后，在我们的Html中的属性或类中应用此指令。

这是Html：

<input type="text" id="phone"
    my-input-mask="{mask: '(999)999-9999[ ext. 9999]', greedy: false}"
    required="" ng-model="employee.phone">

当然，使用jquery.inputmask，我们可以使用更复杂的输入掩码：

<input type="text" id="salary"
    dnr-input-mask="{'alias': 'numeric', 'groupSeparator': ',', 'autoGroup': true, 'digits': 2, 'digitsOptional': true, 'placeholder': '0'}"
    model="employee.salary">

结论是：AngularUI还有很长的路要走，以满足我们的需求。此时，jQuery.inputmask仍然茁壮成长。

Answer 4

这个问题的一个很好的解决方案是使用ngMask，它允许你在没有jQuery的情况下完全按照自己的意愿行事。要做到这一点，只需添加'？'在您想要成为可选字符之后：

mask="9?9999-9999

这非常适合巴西电话号码等输入，可以包含8个或9个字符。

如何使用角度ui-mask屏蔽带有可选扩展名的电话号码？

4 个答案: