Html 如何仅将 type="number" 设为正数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19233415/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make type="number" to positive numbers only
提问by Arian Faurtosh
currently I have the following code
目前我有以下代码
<input type="number" />
it comes out to something like this
结果是这样的
The little selector things on the right allow the number to go into negative. How do I prevent that?
右边的小选择器允许数字变为负数。我该如何防止？
I am having doubts about using type="number", it is causing more problems than it is solving, I am going to sanity check it anyways, so should I just go back to using type="text"?
我对使用有疑问type="number"，它造成的问题比解决的问题还多，无论如何我都会对其进行理智检查，所以我应该回去使用type="text"吗？
回答by Quentin
回答by Kushal
I have found another solution to prevent negative number.
我找到了另一种防止负数的解决方案。
<input type="number" name="test_name" min="0" oninput="validity.valid||(value='');">
回答by Pavlo
It depends on how precise you want to be. It you want to accept only integers, than:
这取决于您想要达到的精确程度。您只想接受整数，而不是：
<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">回答by Shubham Mittal
You can force the input to contain only positive integer by adding onkeypresswithin the inputtag.
您可以通过onkeypress在input标签内添加来强制输入仅包含正整数。
<input type="number" onkeypress="return event.charCode >= 48" min="1" >Here, event.charCode >= 48ensures that only numbers greater than or equal to 0 are returned, while the mintag ensures that you can come to a minimum of 1 by scrolling within the input bar.
在这里，event.charCode >= 48确保只返回大于或等于 0 的数字，而min标签确保您可以通过在输入栏中滚动来获得最少 1。
回答by Deepali
You can use the following to make type="number"accept positive numbers only:
您可以使用以下内容使type="number"只接受正数：
input type="number" step="1" pattern="\d+"
回答by Hafijur Rahman Sakib
You can prevent negative input in a number input form by the following:
您可以通过以下方式防止数字输入表单中的负输入：
<input type="number" onkeyup="if(this.value<0){this.value= this.value * -1}">回答by Rogerio de Moraes
Try
尝试
<input type="number" pattern="^[0-9]" title='Only Number' min="1" step="1">
<input type="number" pattern="^[0-9]" title='Only Number' min="1" step="1">
回答by ABDO
If needing textinput, the pattern works also
如果需要文本输入，该模式也适用
<input type="text" pattern="\d+">
回答by Arst
I cannot find the perfect solution as some work for inputting but not for copy&paste, some are the other way around. This solution works for me. It prevents from negative number, typing "e", copy&paste "e" text.
我找不到完美的解决方案，因为有些工作用于输入但不适用于复制和粘贴，有些则相反。这个解决方案对我有用。它防止负数，键入“e”，复制和粘贴“e”文本。
create a function.
创建一个函数。
<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>
add these properties to input. this two prevent from copy&paste non-number text, including "e". you need to have both together to take effect.
将这些属性添加到输入中。这两个防止复制和粘贴非数字文本，包括“e”。您需要同时拥有两者才能生效。
<input type="number" oninput="validity.valid||(value='');" onpress="isNumber(event)" />
If you are using Vue you can refer this answer here. I have extracted it to a mixin which can be reused.
如果您使用的是 Vue ，则可以在此处参考此答案。我已将其提取到可以重复使用的 mixin。
回答by Andres Paul
Other solution is to use Js to make it positive (min option can be disabled and is not valid when the user types smth) The negative if is not necessary and on('keydown') event can also be used!
其他解决方案是使用 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()));
}
});
