有没有办法阻止输入类型="数字"得到负值？

Question

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

Answer 1

使用这样的min属性:

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

Answer 2

我对@Abhrabm的答案不满意,因为:

它只是防止负号从上/下箭头被输入,而用户可以从键盘键入负数.

解决方案是使用密钥代码来防止:

// 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,<106对应于Numpad 0到9;
• 47,<58对应于Number Row上的0到9; Backspace是8.

因此,此脚本阻止在输入中输入无效密钥.

Answer 3

对我来说,解决方案是:

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

Answer 4

这段代码对我来说很好.你能检查一下:

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

Answer 5

简单的方法:

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

Answer 6

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

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

Answer 7

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

Answer 8

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

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

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

Answer 9

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

如上所述,它也是如此.如何解决问题只是个人偏好.

Answer 10

只需使用 min="0"

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