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

Posted 2023-02-18

【中文标题】有啥办法可以防止 input type="number" 得到负值？

【英文标题】：Is there any way to prevent input type="number" getting negative values?有什么办法可以防止 input type="number" 得到负值？

【发布时间】：2011-11-14 09:12:30

【问题描述】：

我只想获得正值，有没有办法只使用 html 来防止它 请不要建议验证方法

【问题讨论】：

这个帖子更好地回答了同样的问题：***.com/questions/31575496/…

用户（而不是开发人员）呢？如果我输入 -3 我得到一个 3，这不是我的意思！绝对有道理！把-3留在那里，给我一个解释错误。为什么大多数开发人员认为这种可怕的行为是用户友好的？我讨厌开发人员在不告诉我的情况下打破我的键盘。

【参考方案1】：

像这样使用min attribute：

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

【讨论】：

这是more reliable reference source。

这将阻止使用箭头按钮/微调器输入负数。但是，用户仍然可以手动输入负数并将该字段的值读取为负数，从而绕过 min 属性。

@demaniak 不。当这个问题回答了一半时，这个答案是怎么得到这么多赞成的呢？

这个不行，用户还是可以手动输入负数。

我仍然可以将粘贴负值复制到输入字段中。我会寻找另一种解决方案。这个对我来说并不完全有效。

【参考方案2】：

对我来说，解决方案是：

<input type="number" min="0" oninput="this.value = Math.abs(this.value)">

编辑

按照 cmets 的建议，如果最小值为 0，则只需稍作改动即可工作。

<input type="number" min="0" oninput="this.value = 
 !!this.value && Math.abs(this.value) >= 0 ? Math.abs(this.value) : null">

【讨论】：

真正最好的解决方案，一旦你使用 pattern 和 noformvalidate 和 angular ，因为如果不在范围内，模型不会更新。我的情况：<input ng-model="row.myValue" type="row.code == 1 ? 'text' : 'number'" min="0" ng-pattern="..." noformvalidate oninput="if (this.type=='text') this.value=Math.abs(this.value) ">

这在用户知道默认值为 0 时效果最佳。其他明智的用户会在退格键上感到困惑，为什么字段没有被清除。除此之外，这是最好的解决方案。+1

你拯救了我的一天

这个效果最好，在使用小数的情况下也是如此。我在上面使用了其他答案，当允许小数时它停止工作。有没有办法我们可以将这个答案向上移动，以便人们可以主要使用它。

如果你想在填充后保持空白（例如用退格）你应该使用这个this.value = Math.abs(this.value) > 0 ? Math.abs(this.value) : null

【参考方案3】：

我对@9​​87654321@ 不满意，因为：

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

解决办法是用key code来防止：

// Select your input element.
var number = document.getElementById('number');

// Listen for input event on numInput.
number.onkeydown = function(e) 
    if(!((e.keyCode > 95 && e.keyCode < 106)
      || (e.keyCode > 47 && e.keyCode < 58) 
      || e.keyCode == 8)) 
        return false;
    

<form action="" method="post">
  <input type="number" id="number" min="0" />
  <input type="submit" value="Click me!"/>
</form>

@Hugh Guiney提供的说明：

正在检查哪些键码：

95, 47,

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

【讨论】：

赞成，但我认为这将有助于澄清正在检查的关键代码：> 95， 47, min="0"结合。

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

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

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

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

【参考方案4】：

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

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

【讨论】：

这可行，但在您尝试输入 - 后清空整个输入并不是一个好主意。

@extempl 对于试图在常识表明没有否定词的字段中输入否定词的用户来说，这听起来像是一种公平的惩罚。

<input type="number" name="test" min="0" oninput="validity.valid||(value=value.replace(/\D+/g, ''))"> - 这将删除所有非数字符号

@Rexford 我同意，但我设置了min="0"，所以没有负面影响。如果要负值，请删除此属性。

我试过了，但它也阻止了带小数点的数字被输入。

【参考方案5】：

简单的方法：

<input min='0' type="number" onkeypress="return (event.charCode == 8 || event.charCode == 0) ? null : event.charCode >= 48 && event.charCode <= 57">

【讨论】：

既好又简单...但仍然可以粘贴负数。

简单又好用。没用。

【参考方案6】：

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

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

【讨论】：

如何在这里添加更多的ASCII码。例如。加上 45 我也想加 46。怎么做？

@PradeepSingh "返回 [45, 46].indexOf(event.charCode) == -1"

请跳出框框思考。你真的确定keypress 是唯一可以在输入中输入负数的方法...

【参考方案7】：

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

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

【参考方案8】：

这是一个角度 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">

【讨论】：

有没有办法允许粘贴？另外我将正则表达式更改为： /^-?[0-9]+(\.[0-9]*)0,1$/g 以允许负数，但它似乎不起作用？

【参考方案9】：

仅供参考：使用jQuery，您可以使用以下代码覆盖焦点输出的负值：

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

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

【讨论】：

这很好用如果用户将注意力集中在输入字段之外，但是如果他们在仍然在字段中时立即按下回车；他们仍然可以输入负数。

【参考方案10】：

限制数字类型中的字符（-）和（e）

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

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

【讨论】：

它仍然接受我键盘小键盘一侧的破折号（负）符号。仅限制/阻止键盘 qwerty 侧的破折号（负）符号键。

【参考方案11】：

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

【讨论】：

虽然这段代码 sn-p 可以解决问题，但including an explanation 确实有助于提高帖子的质量。请记住，您是在为将来的读者回答问题，而这些人可能不知道您提出代码建议的原因。

虽然这可能是正确的答案，但它缺乏足够的细节。请解释为什么这有效。使用 Stack Overflow 时，请考虑到这是一个活的知识库，不共享知识的答案的用处要小得多。

【参考方案12】：

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

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

HTML 代码

<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'];

【参考方案13】：

只需使用 min="0"

<v-text-field
   v-model="abc"
   class="ml-1 rounded-0"
   outlined
   dense
   label="Number"
   type="number"
   min="0">
</v-text-field>

【参考方案14】：

<input type="number" name="credit_days" pattern="[^\-]+" 
    #credit_days="ngModel" class="form-control" 
    placeholder=" 'Enter credit days' | translate " min="0" 
    [(ngModel)]="provider.credit_days"
    onkeypress="return (event.charCode == 8 || event.charCode == 0 || 
    event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 
    57" onpaste="return false">

【参考方案15】：

这个问题的答案没有帮助。因为它仅在您使用向上/向下键时有效，但如果您键入 -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();
    
   );

【参考方案16】：

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

【参考方案17】：

对于仅允许数字的 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;
    

【参考方案18】：

If Number is Negative or Positive Using ES6’s Math.Sign

const num = -8;
// Old Way
num === 0 ? num : (num > 0 ? 1 : -1); // -1

// ES6 Way
Math.sign(num); // -1