Question

我在html页面上有很多输入框。我想限制用户输入2位小数后的任何数字。

Answer 1

Guilherme Ferreira在他的博客中描述了这一点：

Angularjs input number with two decimal places

使用数字类型和步骤inerval

创建数字输入

<input type="number" name="myDecimal" placeholder="Decimal" ng-model="myDecimal" *step="0.01" />

设置正则表达式以使用ng-pattern验证输入。在这里，我想只接受最多2位小数和带点分隔符的数字

<input type="number" name="myDecimal" placeholder="Decimal" ng-model="myDecimal" ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" step="0.01" />

编辑：

这个SO接近问题使用指令： Restrict number of decimals in html5 type="number" input field (with Angularjs model)

angular.directive('decimalPlaces',function(){
    return {
        link:function(scope,ele,attrs){
            ele.bind('keypress',function(e){
                var newVal=$(this).val()+(e.charCode!==0?String.fromCharCode(e.charCode):'');
                if($(this).val().search(/(.*)\.[0-9][0-9]/)===0 && newVal.length>$(this).val().length){
                    e.preventDefault();
                }
            });
        }
    };
});

然后在HTML中使用它：

<input  type="number" step="0.01" ng-model='somemodel' decimal-places>

Answer 2

您可以使用此指令来实现相同目的。

    .directive('validNumber', function () {
    return {
        require: '?ngModel',
        link: function (scope, element, attrs, ngModelCtrl) {
            if (!ngModelCtrl) {
                return;
            }

            ngModelCtrl.$parsers.push(function (val) {
                var clean = val.replace(/[^0-9\.]+/g, '');
                if (val !== clean || val.indexOf('.') != val.lastIndexOf('.')) {
                    if (val.indexOf('.') != val.lastIndexOf('.')) {
                        clean = clean.substring(0, clean.length - 1)
                    }
                }

                if (clean.indexOf('.') != -1) {
                    if (clean.length > (clean.indexOf('.') + 3)) {
                        clean = clean.substring(0, clean.length - 1)
                    }
                }


                ngModelCtrl.$setViewValue(clean);
                ngModelCtrl.$render();
                return clean;


            });

            element.bind('keypress', function (event) {
                if (event.keyCode === 32) {
                    event.preventDefault();
                }
            });
        }
    };
})

此指令验证数字输入，并限制输入字段中的两个小数点。

在角度为2位小数后限制输入字段

2 个答案: