有什么办法来防止inputtypes=“数字”获得负值？

我只想得到积极的价值，有没有什么办法来防止它只使用html
请不要build议validation方法

Answer 1

像这样使用min属性 ：

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

Answer 2

我不满意@Abhrabm答案，因为：

只能防止从上/下箭头input负数，而用户可以从键盘input负数。

解决方法是防止键码 ：

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

Answer 3

这段代码对我来说工作正常。 你可以检查：

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

Answer 4

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

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

这并不取代服务器端validation！

Answer 5

@Manwal的答案是好的，但我喜欢用更less的代码行代码更好的可读性。 另外我喜欢在html中使用onclick / onkeypress用法。

我build议的解决scheme是一样的：添加

 min="0" onkeypress="return isNumberKey(event)" 

到htmlinput和

 function isNumberKey(evt){ var charCode = (evt.which) ? evt.which : event.keyCode; return !(charCode > 31 && (charCode < 48 || charCode > 57)); } 

作为一个JavaScript函数。

如上所述，它也是一样的。 如何解决这个问题只是个人的select。

Answer 6

对我来说，解决scheme是：

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

Answer 7

简单的方法：

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

Answer 8

这是一个angular度2的解决scheme：

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