首页 文章

html5数字类型只接受正整数

提问于
浏览 次
3

我正在使用一个带有html5数字类型输入的角度应用程序 . 我试图将输入限制为只接受正整数而不是十进制浮点数 .

我尝试使用一些模式和步骤= 1分钟，最大值，但似乎不起作用 .

请建议 .

编辑：

这就是我的表单的样子 . 如果我有原因，请注意混淆 .

<div class="row bottom-spaced-small">
        <div class="col-md-3">
            Number*
        </div>
        <div class="col-md-9">
            <input name="txtNumber" ng-disabled="somevalue" min="1" step="1" type="number" ng-required="true" ng-maxlength="50" ng-model="someNumber" class="form-control color-black" />
        </div>
        <div class="row" style="padding-left: 30px" ng-if="someForm.$submitted && !someForm.txtNumber.$valid">
            <span style="color: red">Number is mandatory and must be a non 0 positive number.</span>
        </div>
    </div>
javascript angularjs html5

3 回答

  • 0

    您可以设置 min 属性，但检查support;

    <input type="number" min="0" step="1">
    回复于
  • 2

    <input type="number" step="1" min="0">

    type 是输入字段的类型， step 定义允许数字的步进，i . 即只允许整数，最后将 min 设置为零意味着不允许使用负数 . 因此，只允许正整数（整数）和零 .

    回复于
  • 7

    合适的人，

    感谢您发布一些有效的答案，但我的要求是其他的 . 因此我决定编写自己的指令来解决这个问题 .

    'use strict';

    （function（）{var app = angular.module（“common”）;

    var onlyInteger = function () {
    return {
        restrict: "A",
        require: '?ngModel',
        link: function (scope, element, attrs, ctrl) {
            ctrl.$parsers.push(function (inputValue) {
                if (inputValue == undefined) return '';
                var transformedValue = inputValue.replace(/[^0-9]/g, '');                    
                if (transformedValue !== inputValue) {
                    ctrl.$setViewValue(transformedValue);
                    ctrl.$render();
                }

                return transformedValue;
            });
        }
    };
};

app.directive('onlyInteger', onlyInteger);
}());

<div class="row bottom-spaced-small">
        <div class="col-md-3">
            Number
        </div>
        <div class="col-md-9">
            <input name="txtNumber" only-integer ng-required="true" ng-maxlength="50" ng-model="someNumber" class="form-control color-black" />
        </div>
        <div class="row" style="padding-left: 30px" ng-if="someForm.$submitted && !someForm.txtNumber.$valid">
            <span style="color: red">Number is mandatory and must be a non 0 positive number.</span>
        </div>
    </div>

    这里有两件事，我已将控件删除为数字类型=“数字”，并将指令包含为属性 .

    在控件中编写的模式几乎是绑定和静态的 . 如果我们希望更通用一些，那么将模式作为属性传递并捕获指令内部以验证该模式 .

    开放给建议和更正 .

    回复于

相关问题