下面是一个角度上的解决方案:

创建一个类OnlyNumber

import {Directive, ElementRef, HostListener} from '@angular/core';

@Directive({
  selector: '[OnlyNumber]'
})
export class OnlyNumber {

  // Allow decimal numbers. The \. is only allowed once to occur
  private regex: RegExp = new RegExp(/^[0-9]+(\.[0-9]*){0,1}$/g);

  // Allow key codes for special events. Reflect :
  // Backspace, tab, end, home
  private specialKeys: Array<string> = ['Backspace', 'Tab', 'End', 'Home'];

  constructor(private el: ElementRef) {
  }

  @HostListener('keydown', ['$event'])
  onKeyDown(event: KeyboardEvent) {
    // Allow Backspace, tab, end, and home keys
    if (this.specialKeys.indexOf(event.key) !== -1) {
      return;
    }

    // Do not use event.keycode this is deprecated.
    // See: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
    let current: string = this.el.nativeElement.value;
    // We need this because the current value on the DOM element
    // is not yet updated with the value from this event
    let next: string = current.concat(event.key);
    if (next && !String(next).match(this.regex)) {
      event.preventDefault();
    }
  }
}

将OnlyNumber添加到app.module.ts中的声明中，并像这样在应用程序的任何地方使用它

<input OnlyNumber="true">

简单的方法:

<input min='0' type=“number” onkeypress=“return （event.charCode == 8 || event.charCode == 0） ？ null ： event.charCode >= 48 && event.charCode <= 57”>

我对@Abhrabm的回答不满意，因为:

它只是阻止负数输入 向上/向下箭头，而用户可以输入负数从键盘。

解决方法是防止用键码:

//选择输入元素。 var number = document.getElementById('number'); //在numInput上监听输入事件 号码。Onkeydown =函数(e) { 如果(! ((e。> 95 && e.keyCode < 106) || (e.keyCode > 47 && e.keyCode < 58) || e.keyCode == 8)) { 返回错误; ｝ ｝ <form action="" method="post"> <input type="number" id="number" min="0" /> <input type="submit" value="点击我!"/> > < /形式

由@Hugh Guiney提供的澄清:

正在检查哪些关键代码:

95， < 106对应Numpad 0到9; 47， < 58对应数字行上的0到9;8是 退格键。

所以这个脚本是防止在输入中输入无效的键。

这个解决方案允许所有键盘功能，包括复制粘贴键盘。它可以防止用鼠标粘贴负数。它适用于所有浏览器，代码依赖的演示使用了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;
    }
  });
});

< input type = "数量" name = " credit_days "模式= ^ \[-]+” # credit_days = " ngModel " class = "表单控件” 占位符="{{'输入信用天数' |翻译}}" min="0" [(ngModel)] = " provider.credit_days " onkeypress = "返回(事件。charCode == 8 ||事件。charCode == 0 || 事件。charCode == 13) ?Null:事件。charCode >= 48 &&事件。charCode < = 57" onpaste="return false"> .

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

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

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