有什么办法可以防止输入类型=“数字”变成负值吗？

Question

我想只有正面的价值观，有没有什么办法来防止它仅使用HTML
请不要建议验证方法

Answer 1

使用min attribute这样的：

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

Answer 2

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

它只能防止负号号码从 上下箭头输入，而用户可以从键盘输入负号。

解决方案是为了防止与键码：由@Hugh Guiney提供

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

澄清：

什么是被检查的键码：

• 95,< 106对应于数字小键盘0至9;
• 47,< 58对应于Number Row上的0到9;和8是 Backspace。

所以这个脚本可以防止输入无效的密钥。

Answer 3

仅供参考：与jQuery可以覆盖在事件的内容负值用下面的代码：

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

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

Answer 4

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

此代码适合我。能否请您检查：

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

Answer 6

这里有一个角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 7

对我来说，解决办法是：

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

Answer 8

简单的方法：

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

Answer 9

该解决方案使包括副本键盘粘贴所有的键盘功能。它可以防止用鼠标粘贴负数。它适用于所有浏览器，codepen上的演示使用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; 
    } 
    }); 
}); 

Answer 10

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

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