简单地使用min="0"

< v-text-field v模型=“abc” 类= " ml-1 rounded-0” 概述了 密集的 label = "数量" type = "数量" min = " 0 " > < / v-text-field >

限制数字类型中的字符(-)和(e)

<input type="number" onkeydown="return event.keyCode !== 69 && event.keyCode !== 189" />

演示:https://stackblitz.com/edit/typescript-cwc9ge?file=index.ts

@Manwal的回答很好，但我喜欢少写几行代码的代码，这样可读性更好。另外，我喜欢在html中使用onclick/onkeypress的用法。

我建议的解决方案也是如此: 添加

min="0" onkeypress="return isNumberKey(event)"

到HTML输入和

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : event.keyCode;
    return !(charCode > 31 && (charCode < 48 || charCode > 57));
}

作为一个javascript函数。

如前所述，它做的是一样的。这只是个人对如何解决问题的偏好。

这个解决方案允许所有键盘功能，包括复制粘贴键盘。它可以防止用鼠标粘贴负数。它适用于所有浏览器，代码依赖的演示使用了bootstrap和jQuery。这应该适用于非英语语言设置和键盘。如果浏览器不支持粘贴事件捕获(IE)，它将在焦点消失后删除负号。这个解决方案的行为与本机浏览器的min=0 type=number一样。

标记:

<form>
  <input class="form-control positive-numeric-only" id="id-blah1" min="0" name="nm1" type="number" value="0" />
  <input class="form-control positive-numeric-only" id="id-blah2" min="0" name="nm2" type="number" value="0" />
</form>

Javascript

$(document).ready(function() {
  $("input.positive-numeric-only").on("keydown", function(e) {
    var char = e.originalEvent.key.replace(/[^0-9^.^,]/, "");
    if (char.length == 0 && !(e.originalEvent.ctrlKey || e.originalEvent.metaKey)) {
      e.preventDefault();
    }
  });

  $("input.positive-numeric-only").bind("paste", function(e) {
    var numbers = e.originalEvent.clipboardData
      .getData("text")
      .replace(/[^0-9^.^,]/g, "");
    e.preventDefault();
    var the_val = parseFloat(numbers);
    if (the_val > 0) {
      $(this).val(the_val.toFixed(2));
    }
  });

  $("input.positive-numeric-only").focusout(function(e) {
    if (!isNaN(this.value) && this.value.length != 0) {
      this.value = Math.abs(parseFloat(this.value)).toFixed(2);
    } else {
      this.value = 0;
    }
  });
});

oninput="this.value=(this.value   < Number(this.min) || this.value   > Number(this.max))  ? '' : this.value;"

仅供参考:使用jQuery，你可以用以下代码覆盖focusout上的负值:

$(document).ready(function(){
    $("body").delegate('#myInputNumber', 'focusout', function(){
        if($(this).val() < 0){
            $(this).val('0');
        }
    });
});

这并不能取代服务器端验证!