javascript - 无法对 type=number 的输入字段应用限制

Question

下面是我的type="number"输入框。我应用了 min 和 max 属性来限制用户输入字段的值。问题是这个给定的验证仍然允许用户在键入数值时超出限制。请告诉我如何阻止他/她输入超过限制的值。

 <input name="capacity" [(ngModel)]="nService.capacity" type="number" 
class="input-minimal" min="1" max="9999" placeholder="Capacity" required>

Answer 1

在 type = "number" 的输入上设置属性 max 和 min 将阻止用户使用微调器。但它不会阻止键盘输入。为此，您必须编写自定义验证程序。

在我的示例中，我使用可选的错误验证 block 绑定(bind)到 keyup 事件，以防万一您希望让用户自行更正。

Plunker

HTML:

 <input autofocus id="myModel" (keyup)="preventInput($event)" 
       name="myModel" 
        #myModel="ngModel"  style="width:60px"  
        [(ngModel)]="capacity" type="number" 
       class="input-minimal" min="1" max="99" 
       placeholder="Capacity" required>

typescript :

 preventInput(event){
    let value=this.capacity;
    if (value >= 100){
      event.preventDefault()
      this.capacity = parseInt(value.toString().substring(0,2));
    }
  }

附言对于验证部分，我使用了 here 中的解决方案