Angularjs。如何使输入字段看起来像253.3445.9621？

Question

如何在输入时使手机输入字段看起来像“253.3445.9621”。 如何才能使数字输入成为可能？

我希望模型中的值（或者说范围正确？将它们彼此混淆（）等于“25334459621”，但是对于用户的输入它应该是。 我正在使用角度和自举。

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

谢谢！

Answer 1

我会使用指令：

<强> 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 2

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

Answer 3

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