限制用户输入超过最大值。

I am using input number type. How do I restrict the user to enter the number more than 100. for Example:

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

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

I have used max and min property to avoid the number is more than 100. If I use the up and down arrow the input min and max property will work correctly. Instead of Up and Down arrow, If I type the number with the help of keyboard means it is not working. i.e, It is allowing to enter more number

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

like 101, 101222, 1023233434353

像101、101222、1023233434353

I want to prevent the user to enter the number if max=100. kindly help.

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

Thanks in advance

谢谢提前

2 个解决方案

#1

You can only restrict the user by putting a watch on the input and reducing the number to the closest maximum value every time the user enters anything that is more than the max value.

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

That said, I would not recommend doing that because that will not leave the users puzzled and confused for they will never know the max value.

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

I make sure the users can only input numbers by pairing the number input type with a pattern validator. Even if you the user manually types anything then pattern validation should kick in otherwise the max min validation is always there.

我确保用户只能通过将数字输入类型与模式验证器配对来输入数字。即使用户手动输入任何东西，那么模式验证也应该启动，否则max min验证始终存在。

Have a look at the code below.

请看下面的代码。

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>

#2

use ng-keydown

使用ng-keydown

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

In validation function you can check for the value and clear the input until the given value in within the range.

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

#1