目前我有以下代码
<input type="number" />
结果是这样的
右边的小选择器允许数字变为负数。我该如何防止呢？
我对使用有疑问type="number"，它造成的问题多于解决的问题，无论如何我都会对其进行理智检查，所以我应该回到使用type="text"吗？
问问题
467086 次
21 回答
166
我找到了另一种防止负数的解决方案。
<input type="number" name="test_name" min="0" oninput="validity.valid||(value='');">
于 2017-09-21T02:35:03.717 回答
88
这取决于您想要的精确度。如果您只想接受整数，则：
<input type="number" min="1" step="1">例如，如果您想要浮点数，小数点后两位数：
<input type="number" min="0.01" step="0.01">于 2013-10-07T20:01:50.883 回答
70
onkeypress您可以通过在input标签内添加来强制输入仅包含正整数。
<input type="number" onkeypress="return event.charCode >= 48" min="1" >在这里，event.charCode >= 48确保只返回大于或等于 0 的数字，而min标签确保您可以通过在输入栏中滚动来达到最小值 1。
于 2016-12-22T07:23:01.317 回答
26
您可以通过以下方式将负输入变为正数：
<input type="number" onkeyup="if(this.value<0){this.value= this.value * -1}">于 2020-01-12T13:50:10.230 回答
7
尝试
<input type="number" pattern="^[0-9]" title='Only Number' min="1" step="1">
于 2014-07-31T11:44:14.160 回答
7
您可以使用以下内容type="number"仅接受正数：
input type="number" step="1" pattern="\d+"
于 2018-09-28T17:14:23.727 回答
3
如果您尝试输入负数，onkeyup 事件会阻止此操作，如果您使用输入数字上的箭头，onblur 事件会解析该部分。
<input type="number"
onkeyup="if(this.value<0)this.value=1"
onblur="if(this.value<0)this.value=1"
>于 2020-04-10T12:33:54.520 回答
2
我找不到完美的解决方案，因为有些工作可以用于输入，但不能用于复制和粘贴，有些则相反。这个解决方案对我有用。它可以防止负数，键入“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 中。
于 2018-11-16T01:46:01.680 回答
0
这取决于您是否需要 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);
请注意，这些解决方案都不能完全阻止用户尝试输入无效输入，但您可以调用checkValidityorreportValidity来确定用户是否输入了有效输入。
当然，您仍然应该进行服务器端验证，因为用户总是可以忽略客户端验证。
于 2019-03-23T15:54:31.383 回答
0
This solution might seem a little bit redundant, but takes care of every aspect.
In the form use this
<input type="number" min="0" (keypress)="onlyDigits($event)" >
and in the .ts define the function
onlyDigits(event) {
let code = event.charCode;
return (code >= 48 && code <= 57);
}
This ensures only positive numbers might be entered with the arrows. It also prevents typing of any non-digit char (including '-', '+' and 'e')
于 2022-02-16T12:04:03.803 回答
0
尝试这个：
- 在 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
/>
于 2020-02-25T18:41:07.290 回答
0
如果需要文本输入，该模式也适用
<input type="text" pattern="\d+">
于 2019-05-06T08:26:46.047 回答
0
在您的输入类型中添加此代码；
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" />
于 2017-06-23T08:27:40.317 回答
0
其他解决方案是使用Js使其成为正数（min选项可以被禁用并且在用户键入smth时无效）负数如果没有必要并且也可以使用on（'keydown'）事件！
let $numberInput = $('#whatEverId');
$numberInput.on('change', function(){
let numberInputText = $numberInput.val();
if(numberInputText.includes('-')){
$numberInput.val(Math.abs($numberInput.val()));
}
});
于 2019-02-26T08:39:24.630 回答
-1
用这个。
onkeypress="return (event.charCode >= 48 && event.charCode <= 57 || event.charCode == 46)"
您可以输入整数和小数。
于 2021-11-17T04:47:35.723 回答
-1
我认为最好使用类型文本而不是数字，因为使用类型=数字，您将面临一些问题，例如输入字段中的箭头键和向上和向下键的值变化。
<input type="text" onkeypress="return event.charCode>=48 && event.charCode<=57" />
于 2021-09-28T07:41:15.473 回答
-2
<input type="number" min="1" step="1">于 2016-12-10T03:44:08.477 回答
-2
使用文本类型的输入，您可以使用它进行更好的验证，
return (event.keyCode? (event.keyCode == 69 ? false : event.keyCode >= 48 && event.keyCode <= 57) : (event.charCode >= 48 && event.charCode <= 57))? true : event.preventDefault();
于 2018-04-08T08:33:44.150 回答
-3
(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
于 2020-12-15T09:12:07.537 回答
-5
尝试这个：
Yii2 : Validation rule
public function rules() {
return [
['location_id', 'compare', 'compareValue' => 0', 'operator' => '>'],
];
}
于 2018-07-25T08:56:55.637 回答