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

How can i make a phone input field looking like "253.3445.9621" on input. And how to make only numbers inputting possible?

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

I want that the value in model(or correct to say scope? confuse them with each other( ) is equal to "25334459621", but on input for user it should be with . I'm using angular and bootstrap.

我希望模型中的值(或者说范围正确?将它们彼此混淆()等于“25334459621”,但是对于用户的输入它应该是。我正在使用角度和引导程序。

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

Thank you!

3 个解决方案

#1

I would use directive:

我会使用指令:

HTML

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

directive

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;
            });
        }
    };
}]);

See Fiddle

Image:

#2

Angular UI-Mask is the best solution. It's based on the jQuery Mask plugin that has been pretty well vetted:

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

#3

You should research creating your own custom directive that uses ngModelController for restricting the input to valid phone number format. You can strip out the '.' within the directive after validating format.

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