如何使type="number"只能是正数

添加min属性

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

这取决于你想要多精确。如果你想只接受整数，那么:

<input type="number" min="1" step="1">

If you want floats with, for example, two digits after decimal point:

<input type="number" min="0.01" step="0.01">

试一试

<input type="number" pattern="^[0-9]" title='Only Number' min="1" step="1">

你可以通过在input标记中添加onkeypress来强制输入只包含正整数。

<input type="number" onkeypress="return event.charCode >= 48" min="1" >

Here, event.charCode >= 48 ensures that only numbers greater than or equal to 0 are returned, while the min tag ensures that you can come to a minimum of 1 by scrolling within the input bar.

在输入类型中添加此代码;

onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57"

例如:

<input type="text" name="age" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" />

我已经找到了防止负数的另一种解决方案。

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

对于文本类型的输入，你可以使用它来更好地验证，

return (event.keyCode? (event.keyCode == 69 ? false : event.keyCode >= 48 && event.keyCode <= 57) : (event.charCode >= 48 && event.charCode <= 57))? true : event.preventDefault();

试试这个:

Yii2 : Validation rule


public function rules() {
return [
['location_id', 'compare', 'compareValue' => 0', 'operator' => '>'],
];
}

你可以使用以下方法使type="number"只接受正数:

<input type="number" step="1" pattern="\d+">

我找不到完美的解决方案，因为有些工作用于输入，但不用于复制粘贴，有些则相反。这个解决办法对我很管用。它可以防止负数，输入“e”，复制粘贴“e”文本。

创建一个函数。

<script language="JavaScript">


// this prevents from typing non-number text, including "e".
function isNumber(evt) {
evt = (evt) ? evt : window.event;
let charCode = (evt.which) ? evt.which : evt.keyCode;
if ((charCode > 31 && (charCode < 48 || charCode > 57)) && charCode !== 46) {
evt.preventDefault();
} else {
return true;
}
}
</script>

将这些属性添加到输入中。这两个防止复制粘贴非数字文本，包括“e”。你需要同时拥有两者才能生效。

<input type="number" oninput="validity.valid||(value='');" onpress="isNumber(event)" />

如果你正在使用Vue 你可以参考这里的答案。我已经将它提取到一个可以重用的mixin中。

其他解决方案是使用Js使它为正(min选项可以被禁用，当用户输入smth时无效)负if是不必要的，on('keydown')事件也可以使用!

let $numberInput =  $('#whatEverId');
$numberInput.on('change', function(){
let numberInputText = $numberInput.val();
if(numberInputText.includes('-')){
$numberInput.val(Math.abs($numberInput.val()));
}
});

这取决于你想要的是int还是float字段。下面是这两款游戏的外观:

<input type="number" name="int-field" id="int-field" placeholder="positive int" min="1" step="1">
<input type="number" name="float-field" id="float-field" placeholder="positive float" min="0">

int字段附加了正确的验证，因为它的最小值是1。然而，float字段接受0;为了解决这个问题，你可以再添加一个约束验证器:

function checkIsPositive(e) {
const value = parseFloat(e.target.value);
if (e.target.value === "" || value > 0) {
e.target.setCustomValidity("");
} else {
e.target.setCustomValidity("Please select a value that is greater than 0.");
}
}


document.getElementById("float-field").addEventListener("input", checkIsPositive, false);

JSFiddle这里

注意，这些解决方案都不能完全阻止用户尝试输入无效的输入，但是你可以调用__ABC0或reportValidity来确定用户是否输入了有效的输入。

当然，您仍然应该进行服务器端验证，因为用户总是可以忽略客户端验证。

如果需要文本输入，该模式也可以工作

<input type="text" pattern="\d+">

你可以通过以下方法将负输入转化为正数:

<input type="number" onkeyup="if(this.value<0){this.value= this.value * -1}">

试试这个:

• 在Angular 8中测试
• 值是正的
• 此代码还处理null和negitive值。

              <input
type="number"
min="0"
(input)="funcCall()" -- Optional
oninput="value == '' ? value = 0 : value < 0 ? value = value * -1 : false"
formControlName="RateQty"
[(value)]="some.variable" -- Optional
/>

如果您尝试输入负数，onkeyup事件将阻止此操作，如果您在输入数字上使用箭头，onblur事件将解决此部分。

<input type="number"
onkeyup="if(this.value<0)this.value=1"
onblur="if(this.value<0)this.value=1"
>

(function ($) {
$.fn.inputFilter = function (inputFilter) {
return this.on('input keydown keyup mousedown mouseup select contextmenu drop', function () {
if (inputFilter(this.value)) {
this.oldValue = this.value;
this.oldSelectionStart = this.selectionStart;
this.oldSelectionEnd = this.selectionEnd;
} else if (this.hasOwnProperty('oldValue')) {
this.value = this.oldValue;
//this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
} else {
this.value = '';
}
});
};
})(jQuery);


$('.positive_int').inputFilter(function (value) {
return /^\d*[.]?\d{0,2}$/.test(value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" class="positive_int"/>

以上代码可以正常工作!!它还可以防止插入超过2个小数点。如果你不需要这个，只要删除\d{0,2}，或者如果需要更有限的小数点，只要改变2

我认为使用类型文本是最好的，而不是数字，因为使用类型=数字，你将面临一些问题，如输入字段的方向键和上、下键的值变化。

<input type="text" onkeypress="return event.charCode>=48 && event.charCode<=57" />

用这个。

onkeypress="return (event.charCode >= 48 && event.charCode <= 57 || event.charCode == 46)"

可以输入整数和小数。

这个解决方案可能看起来有点多余，但它照顾到了每个方面。

在表单中使用this

<input type="number" min="0" (keypress)="onlyDigits($event)" >

在。ts中定义函数

onlyDigits(event) {
let code = event.charCode;
return (code >= 48 && code <= 57);
}

这确保箭头只输入正数。它还可以防止输入任何非数字字符(包括'-'，'+'和'e')

我在angular中创建了一个指令，强制输入no“-”。

import { Directive, ElementRef, HostListener } from '@angular/core';


@Directive({
selector: '[appPositiveNumber]'
})
export class PositiveNumberDirective {
private regex = new RegExp(/^\d*[.,]?\d*$/g);
private specialKeys: Array<string> = ['Backspace', 'Tab', 'End', 'Home', 'ArrowLeft', 'ArrowRight', 'Del', 'Delete'];


constructor(private el: ElementRef) { }


@HostListener('keydown', ['$event']) onKeyDown(event: KeyboardEvent) {
if (!event.key.match(this.regex) && !this.specialKeys.includes(event.key)) {
event.preventDefault();
return;
}
}
}

所以u可以像这样将它添加到元素上:

<input type="number" appPositiveNumber min="0" step="1" max="9999"
[(ngModel)]="value.employeeCount">

尝试这个选项，并给出最小值和最大值

 <input type="number"
pattern="\d+"
inputmode="numeric"
value="123"
autocomplete="off"
maxlength="5"
step="1"
min="0"
max="99999"
>