Question

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

Screenshot of input control

Answer 1

像这样使用min attribute：

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

Answer 2

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

仅阻止输入否定数字向上/向下箭头，而用户可以从键盘输入负数。

解决方法是使用密钥代码：

来阻止

＆＃13;

// 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;
    }
}

＆＃13;

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

＆＃13;

由@Hugh Guiney提供的澄清：

正在检查哪些密钥代码：

95，＆lt; 106对应于Numpad 0到9;
47，＆lt; 58对应于Number Row上的0到9; 8是退格键。

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

Answer 3

对我而言，解决方案是：

aws

Answer 4

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

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

Answer 5

简单方法：

＆＃13;

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

＆＃13;

Answer 6

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

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

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

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

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

Answer 8

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

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

Answer 9

这是一个有角度的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();
    }
  }
}

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

<input OnlyNumber="true">

Answer 10

您应该在输入中使用min属性

<input type='number' min='0'/>

Answer 11

<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">

Answer 12

这是一个最适合我的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;
    }

Answer 13

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

Answer 14

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

标记：

function read(el) {

    function readFile() {
        var file = el.files[0];
        if (file) {
            read = new FileReader();
            read.readAsDataURL(file);
        }

        return read.result;
    }
}

的Javascript

<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>

Answer 15

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

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

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

Answer 16

答案无济于事。因为它仅在使用上/下键时才起作用，但是如果您输入-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();
    }
   });

Answer 17

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

Answer 18

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

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

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

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

18 个答案: