有什么办法可以防止 input type="number" 得到负值？

像这样使用 min attribute：

<input type="number" min="0">

---

对我来说，解决方案是：

编辑

正如评论中所建议的，如果 0 是最小值，则只需稍作改动即可工作。

---

我对 @Abhrabm answer 不满意，因为：

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

解决方案是用关键代码防止：

// 选择你的输入元素。 var number = document.getElementById('number'); // 监听 numInput 上的输入事件。 number.onkeydown = function(e) { if(!((e.keyCode > 95 && e.keyCode < 106) || (e.keyCode > 47 && e.keyCode < 58) || e.keyCode == 8) ) { 返回假； } }

< /表格>

@Hugh Guiney 提供的说明：

正在检查哪些关键代码：

95，< 106 对应数字键盘 0 到 9；

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

因此，此脚本防止在输入中输入无效密钥。

---

赞成，但我认为这将有助于澄清正在检查的关键代码：> 95, < 106 对应数字键盘 0 到 9； > 47, < 58 对应于数字行上的 0 到 9； 8 是退格键。所以这个脚本阻止了除那些键之外的任何键被输入。这很彻底，但我认为对于本机支持数字输入的浏览器来说可能有点过分了，因为它们已经过滤掉了字母键（除了可以具有数字含义的“e”之类的字符）。防止 189（破折号）和 109（减法）可能就足够了。然后与 min="0" 结合。

@Manwal 它限制使用键盘复制和粘贴数字。并允许我使用鼠标复制粘贴负数。

@Beniton 感谢提供这个用例。你能给我一点关于你在做什么的想法吗？我总是可以帮助你。请提供一些可运行的代码或小提琴。您可以在代码中进行表单提交级别验证。虽然如果我不允许负数，我总是检查后端。

基本上只需复制粘贴到该字段中即可。这不是一个特殊情况或任何东西。与其通过键码处理验证，不如使用 onChange 或 focusOut 并构建一个小验证函数来捕获任何负数。

箭头键（37、38、39、41）的条件也应该设置。 || (e.keyCode>36 && e.keyCode<41) 这不允许用户通过向上/向下箭头增加/减少数字并向右/向左编辑数字。

这段代码对我来说很好用。你能检查一下：

<input type="number" name="test" min="0" oninput="validity.valid||(value='');">

---

简易方法：

---

如果输入负数，我想允许十进制数字并且不清除整个输入。这至少在 chrome 中运行良好：

<input type="number" min="0" onkeypress="return event.charCode != 45">

---

@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函数。

如前所述，它也是如此。这只是个人喜好如何解决问题。

---

这是一个角度2的解决方案：

创建一个类 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">

---

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

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

这不会取代服务器端验证！

---

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

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

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

---

只需使用 min="0"

---

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

---

如果您不想用更多代码弄脏 HTML，只需添加另一种方法（使用 Angular）：

您只需订阅字段 valueChanges 并将 Value 设置为绝对值（注意不要发出新事件，因为这将导致另一个 valueChange 因此递归调用并触发最大调用大小超出错误）

代码

<form [formGroup]="myForm">
    <input type="number" formControlName="myInput"/>
</form>

TypeScript 代码（在您的组件内）

formGroup: FormGroup;

ngOnInit() { 
    this.myInput.valueChanges 
    .subscribe(() => {
        this.myInput.setValue(Math.abs(this.myInput.value), {emitEvent: false});
    });
}

get myInput(): AbstractControl {
    return this.myForm.controls['myInput'];
}

---

---

这个问题的答案是没有帮助的。因为它仅在您使用向上/向下键时有效，但如果您键入 -11 它将不起作用。所以这是我使用的一个小修复

这个是整数

  $(".integer").live("keypress keyup", function (event) {
    //    console.log('int = '+$(this).val());
    $(this).val($(this).val().replace(/[^\d].+/, ""));
    if (event.which != 8 && (event.which < 48 || event.which > 57))
    {
        event.preventDefault();
    }
   });

这个当你有价格的时候

        $(".numeric, .price").live("keypress keyup", function (event) {
     //    console.log('numeric = '+$(this).val());
    $(this).val($(this).val().replace(/[^0-9\,\.]/g, ''));

    if (event.which != 8 && (event.which != 44 || $(this).val().indexOf(',') != -1) && (event.which < 48 || event.which > 57)) {
        event.preventDefault();
    }
   });

---

此解决方案允许所有键盘功能，包括使用键盘进行复制粘贴。它可以防止用鼠标粘贴负数。它适用于所有浏览器，codepen 上的演示使用引导程序和 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;
    }
  });
});

---

对于仅允许数字的 QTY 字段，这是一个最适合我的解决方案。

// Only allow numbers, backspace and left/right direction on QTY input
    if(!((e.keyCode > 95 && e.keyCode < 106) // numpad numbers
        || (e.keyCode > 47 && e.keyCode < 58) // numbers
        || [8, 9, 35, 36, 37, 39].indexOf(e.keyCode) >= 0 // backspace, tab, home, end, left arrow, right arrow
        || (e.keyCode == 65 && (e.ctrlKey === true || e.metaKey === true)) // Ctrl/Cmd + A
        || (e.keyCode == 67 && (e.ctrlKey === true || e.metaKey === true)) // Ctrl/Cmd + C
        || (e.keyCode == 88 && (e.ctrlKey === true || e.metaKey === true)) // Ctrl/Cmd + X
        || (e.keyCode == 86 && (e.ctrlKey === true || e.metaKey === true)) // Ctrl/Cmd + V
    )) {
        return false;
    }

---

如果 Number 是负数或正数，使用 ES6 的 Math.Sign const num = -8; // 老方法 num === 0 ?数 : (数 > 0 ? 1 : -1); // -1 // ES6 方式 Math.sign(num); // -1

---