Question

我正在使用输入数字类型。如何限制用户输入超过100的数字。例如：

<input type="number" max=100 min=0/>

我使用了max和min属性来避免数字超过100.如果我使用向上和向下箭头，输入的min和max属性将正常工作。而不是向上和向下箭头，如果我在键盘的帮助下键入数字意味着它不起作用。即，允许输入更多数字

如101,101222,1023233434353

如果max = 100，我想阻止用户输入数字。请帮助。

提前致谢

Answer 1

您只能通过在输入上放置手表来限制用户，并在每次用户输入超过最大值的任何值时将数字减少到最接近的最大值。

那就是说，我不建议这样做，因为这不会让用户感到困惑和困惑，因为他们永远不会知道最大值。

我确保用户只能通过将数字输入类型与模式验证器配对来输入数字。即使您用户手动键入任何内容，也应启用模式验证，否则最大最小验证将始终存在。

看看下面的代码。

var app = angular.module('app', []);

app.controller('ctrl', function($scope) {});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" />

<body ng-app="app" ng-controller="ctrl">
  <div class="col-lg-12">

    <form name="fieldForm" id="fieldForm" class="customform" novalidate="">
      <div class="form-group is-empty">
        <input class="form-control" name="maxLength" id="maxLength" placeholder="Maximum Length" type="number" data-ng-model="newField.MaxLength" style="cursor: auto;" ng-min="100" ng-max="100000" ng-pattern="/^\d+$/" required>
        <span class="error-block has-error" ng-show="fieldForm.maxLength.$error.required && (fieldForm.maxLength.$dirty || fieldForm.maxLength.$touched)">
                            Max Length is required
                        </span>
        <span class="error-block has-error" ng-show="fieldForm.maxLength.$error.pattern && (fieldForm.maxLength.$dirty || fieldForm.maxLength.$touched)">
                            Only numbers allowed
                        </span>
        <span class="error-block has-error" ng-show="fieldForm.maxLength.$error.min">
                            Minimum is 100
                        </span>
        <span class="error-block has-error" ng-show="fieldForm.maxLength.$error.min">
                            Maximum is 10000
                        </span>
      </div>
    </form>
  </div>
</body>

Answer 2

使用ng-keydown

<input ng-keydown="validationFunction()" type="number>

在验证功能中，您可以检查值并清除输入，直到给定值在该范围内。

限制用户输入超过最大值

2 个答案: