有没有办法防止输入type="number"得到负值?

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

input control的截图

490725 次浏览
小开
最佳答案

像这样使用min属性:

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

我不满意@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冈比亚河< / >强提供的澄清:

正在检查哪些关键代码:

  • 95年,& lt;106对应Numpad 0到9;
    • <李> 47岁& lt;58对应数字行的0到9;8是 李退格。< / >

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

小开

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

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

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

小开

@Manwal的回答很好，但我喜欢少写几行代码的代码，这样可读性更好。另外，我喜欢在html中使用onclick/onkeypress的用法。

我建议的解决方案也一样: 添加< / p > 
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函数。

如前所述，它做的是一样的。这只是个人对如何解决问题的偏好。

小开

这个代码对我来说工作得很好。你能查一下吗:

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

下面是一个角度上的解决方案:

创建一个类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">
小开

对我来说，解决方案是:

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

Edit

As suggested on the comments with a minor change to work if 0 is the min value.

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

小开

简单的方法:

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

小开

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

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

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

这里有一个解决方案，我工作最好的一个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;
}
小开

我想允许小数，如果输入负数，不清除整个输入。这在铬至少工作良好:

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

只是添加了另一种方法来做这个(使用角)，如果你不想用更多的代码弄脏HTML:

你只需要订阅字段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'];
}
小开

这个问题的答案是没有帮助的。因为它只在你使用上/下键时起作用，但如果你输入-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();
}
});
小开 

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

小开

限制字符(-)&(e)数字类型

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

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

小开

只需使用min="0"

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


提交答案