仅正整数的 HTML 输入（类型=数字）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32777184/
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
HTML input for Positive Whole Numbers Only (Type=number)
提问by SCS
I can't find the right regex pattern for this, even though there are a lot of questions in this kind.
我找不到合适的正则表达式模式，即使有很多这类问题。
I dont want the user to be able to type or input
我不希望用户能够打字或输入
<td><input type="number" pattern=" 0+\.[0-9]*[1-9][0-9]*$" name="itemConsumption" /></td>
- -1.0 (Negative values)
- String Values and any character
- 1.0 (Decimal Values)
- No range Limit
- -1.0（负值）
- 字符串值和任何字符
- 1.0（十进制值）
- 无范围限制
I only want to accept positive whole numbers
我只想接受正整数
SOLVED no need for regex, I did not know this :D
解决了不需要正则表达式，我不知道这个：D
<td><input type="number" pattern=" 0+\.[0-9]*[1-9][0-9]*$" name="itemConsumption" onkeypress="return event.charCode >= 48 && event.charCode <= 57"</td>
回答by Wiktor Stribi?ew
To disallow any input but numeric, you may use
要禁止除数字之外的任何输入，您可以使用
<input type="text" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" name="itemConsumption" />
^------------....
<form id="mfrm">
<table>
<tr>
<td>Enter number only: <input type="text" name="itemConsumption" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" /></td>
<td><input type="Submit"/></td>
</tr>
</table>Here, the event.charCode == 8 || event.charCode == 0 || event.charCode == 13condition handles the case when DELETE, BACKSPACE or ENTER keys are pressed (important for Firefox, see Mohit's commentbelow and datashaman's commentrelated to enabling the ENTER key).
在这里，event.charCode == 8 || event.charCode == 0 || event.charCode == 13条件处理按下 DELETE、BACKSPACE 或 ENTER 键的情况（对 Firefox 很重要，请参阅下面的Mohit 评论和datashaman与启用 ENTER 键相关的评论）。
The event.charCode >= 48 && event.charCode <= 57means that only 0 (decimal code 48) and all other digits up to 9 (decimal code 57) will be returned.
这event.charCode >= 48 && event.charCode <= 57意味着将只返回 0（十进制代码 48）和所有其他高达 9（十进制代码 57）的数字。
回答by Nikhil Mahirrao
You can use type, minand oninput
您可以使用type、min和oninput
<input type="number" min="0" step="1" oninput="validity.valid||(value='');">
<form>
<label>Input with positive numbers only</label><br/><br/>
<input type="number" min="0" step="1" oninput="validity.valid||(value='');">
</form>回答by HAYMbl4
To allow only number values you can use as follows:
要仅允许数字值，您可以使用如下：
<td><input type="number" pattern="\d+" name="itemConsumption" /></td>
回答by Oleksii Trekhleb
回答by Ashoke Kumar
You can use this regex pattern for whole numbers [0-9]* or \d* [0-9] is range you can type 0 to 9 and * means not expecting any number or may you type infinite numbers
您可以将此正则表达式模式用于整数 [0-9]* 或 \d* [0-9] 是您可以输入 0 到 9 的范围，* 表示不期望任何数字，或者您可以输入无限数字
回答by Konstantin Petlya
Maybe this jQuery Codepen snipetwill be helpful for someone. It's for type="number" (not "text"):
也许这个 jQuery Codepen snipet会对某人有所帮助。它用于 type="number"（不是“text”）：
<input class="js-input-absint" type="number" step="1" min="18" max="150" name="age" value="50">
with [0-9] allowed inputs only. In the input will printed/pasted only numbers [0-9] with an min-max range (optional).
仅允许输入 [0-9]。在输入中将仅打印/粘贴数字 [0-9] 与最小-最大范围（可选）。
Some explanations: The code displays only numbers at the input stage, and does not reset the value to "" (empty) in case of inputting not valid number values like it does by default for type="number". And you can't use the attribute pattern="/^[0-9]*$/" for an input type="number".
一些解释：代码在输入阶段只显示数字，并且在输入无效数字值的情况下不会像 type="number" 那样将值重置为 ""（空）。并且您不能将属性模式="/^[0-9]*$/" 用于输入类型="数字"。
var $inputAbsint = $('.js-input-absint');
if ($inputAbsint.length) {
$(document).on('keypress', '.js-input-absint', function (event) {
var allowed = /^[0-9]|Arrow(Left|Right)|Backspace|Home|End|Delete$/;
return allowed.test(event.key);
}).on('focusout paste', '.js-input-absint', function () {
var $input = $(this);
var defaultValue = this.defaultValue || $input.attr('min');
// Important(!): Timeout for the updated value
setTimeout(function () {
var current = $input.val();
var regexNumbers = new RegExp(/^[0-9]*$/, 'g');
var isNumbersOnly = regexNumbers.test(current);
// Clear wrong value (not numbers)
if ((current === '' || !isNumbersOnly) && defaultValue.length) {
$input.val(defaultValue);
current = defaultValue;
}
// Min/Max
var min = parseInt($input.attr('min'), 10);
var max = parseInt($input.attr('max'), 10);
var currentInt = parseInt(current, 10);
if (!isNaN(min) && !isNaN(currentInt) && currentInt < min) {
$input.val(min);
}
if (!isNaN(max) && !isNaN(currentInt) && currentInt > max) {
$input.val(max);
}
}, 100);
});
}
回答by earlcan
You can't press ' - ' button on keyboard.
您不能按键盘上的“ - ”按钮。
<!--HTML Code is below-->
<input type="text" name="value1" id="value1" class="form-control" required="required" onkeyup="keyCode(event)">
<!--JQuery Code is below-->
<script>
$(document).ready(function() {
$value1.on("keyup", function keyCode(event){
var x = event.keyCode;
if (x == 109 || x == 189) {
event.preventDefault();
alert ("You can't enter minus value !");
}
});
});
</script>
Keycode of '109' represent numeric side minus button of keyboard. Keycode of '189' represent minus button above of the character buttons.
'109' 的键码代表键盘的数字侧减号按钮。'189' 的键码代表字符按钮上方的减号按钮。
回答by Ashoke Kumar
It is best to use following in input field, it will stop you to enter any other character except whole numbers.
最好在输入字段中使用以下内容，它会阻止您输入除整数以外的任何其他字符。
Only whole number will be accepted.
只接受整数。
onkeypress="return (event.charCode == 8 || event.charCode == 0) ? null : event.charCode >= 48 && event.charCode <= 57"
See demo
看演示
