twitter-bootstrap - 角。如何使输入字段看起来像 253.3445.9621？

Question

如何使电话输入字段在输入时看起来像“253.3445.9621”。以及如何使仅输入数字成为可能？

我希望模型中的值（或正确地说范围？混淆它们彼此（）等于“25334459621”，但在用户输入时它应该是。我使用角度和引导程序。

<input id="contactn" name="contactn" placeholder="" class="input" type="text"
                           ng-model="data.contact">

谢谢！

Answer 1

Angular UI-Mask是最好的解决方案。它基于经过严格审查的 jQuery Mask 插件：

Answer 2

我会使用指令：

HTML

<input type="text" ng-model="test" separator="number" />

指示

app.directive('separator', ['$filter', function($filter) {
    return {
        require: '?ngModel',
        link: function(scope, elem, attrs, ctrl) {
            if (!ctrl) return;


            ctrl.$formatters.unshift(function(a) {
              return $filter(attrs.format)(ctrl.$modelValue)
            });


            ctrl.$parsers.unshift(function(viewValue) {
              var plainNumber = viewValue.replace(/[^\d|\-+|\.+]/g, '');
              elem.val( $filter('number')(plainNumber) );
              return plainNumber;
            });
        }
    };
}]);

看Fiddle

图片：

Answer 3

您应该研究创建自己的自定义指令 ，该指令使用ngModelController将输入限制为有效的电话号码格式。你可以去掉'。在验证格式后的指令内。