只接受整数的数字输入类型？
我正在使用通过 jQuery 实现 HTML5 验证的 jQuery 工具 Validator。
到目前为止，它一直运行良好，除了一件事。在 HTML5 规范中，input 类型 "number" 可以同时包含整数和浮点数。
这似乎非常短视，因为只有当您的数据库字段是有符号浮点数时，它才会成为有用的验证器（对于无符号整数，您将不得不回退到 pattern 验证，因此会失去像 up 和 down 这样的额外功能支持它的浏览器的箭头）。
是否有另一种输入类型或可能将输入限制为无符号整数的属性？
我找不到任何东西。
将 step 设置为 1 不是答案，因为它不限制输入。您仍然可以在文本框中键入负浮点数。
另外，我知道模式验证（我在原始帖子中提到过），但这不是问题的一部分。
我想知道 HTML5 是否允许将“数字”类型的输入限制为正整数值。对于这个问题，答案似乎是“不，它没有”。
我不想使用模式验证，因为这在使用 jQuery 工具验证时会导致一些缺点，但现在看来规范不允许使用更简洁的方法来执行此操作。
number 输入（至少在 FF/Chrome/Safari 中）现在默认只接受整数，除非您为 { 3} attr 允许十进制值；例如：step="0.01"。 Documented MDN here。对此有两种看法，因为我认为这是一个明智的默认设置，但也是一个重大更改（是的，它影响了我编写的一些代码）。
step="1" 时输入非整数。 MDN 表示该行为取决于浏览器。
将 step 属性设置为 1：
这在 Chrome 中似乎有点问题，所以它可能不是目前最好的解决方案。
更好的解决方案是使用 pattern 属性，该属性使用正则表达式来匹配输入：
\d 是数字的正则表达式，* 表示它接受多个数字。
number，其中包含其他字符，则 Chrome 会向您显示一条错误消息。
submit 之外的其他事件来触发发布时才重要。
/\d*/.test(1.1) // true
pattern="\d*" 与 /\d*/ 不同，pattern="\d*" 等于 /^(?:\d*)$/，请参考 HTML5 pattern attribute documentation。
使用 JavaScript 的简单方法：
<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" >
replace(/(\..*)\./g, '$1')
. 很重要，例如可以写入 123.556。
<input type="text" name="PhoneNumber" pattern="[0-9]{10}" title="Phone number">
使用此代码，文本字段的输入仅限于输入数字。 Pattern 是 HTML 5 中可用的新属性。
模式很好，但如果您想将输入限制为仅使用 type="text" 的数字，您可以使用 oninput 和正则表达式，如下所示：
<input type="text" oninput="this.value=this.value.replace(/[^0-9]/g,'');" id="myId"/>
我为我而战：）
这不仅适用于 html5，所有浏览器都可以正常工作。尝试这个
onkeyup="this.value=this.value.replace(/[^0-9]/g,'');"
oninput
模式总是更适合限制，尝试 oninput 和 min 出现 1 只输入从 1 开始的数字
<input type="text" min="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');"
value=${var} >
最短的
这是 R. Yaghoobi answer 的尺寸改进
我们在这里使用“OR”运算符的标准简写，例如二进制中的 9 | 2 = 11：0b1001 | 0b1010 = 0b1011。该运算符首先以隐式方式将数字转换为整数，然后执行 OR。但是因为 OR 为零不会改变任何东西，所以数字被转换为整数。 OR 与非数字字符串给出 0。
只需将其放在您的输入字段中：onkeypress='return event.charCode >= 48 && event.charCode <= 57'
即使我使用 html 属性，我也在使用 Chrome 并且遇到了一些问题。我最终得到了这个 js 代码
$("#element").on("input", function(){
var value = $(this).val();
$(this).val("");
$(this).val(parseInt(value));
return true;
});
将 step 属性设置为任何浮点数，例如 0.01，您就可以开始了。
您是否尝试过像这样将 step 属性设置为 1
<input type="number" step="1" />
也许它不适合每个用例，但是
<input type="range" min="0" max="10" />
可以做得很好：fiddle。
检查 documentation。
这是一个老问题，但可访问的（现在大多数浏览器都支持）版本是：
<input type="text" inputmode="numeric" pattern="[0-9]*">
pattern="-?[0-9]*"。
pattern="\d*" 替换了模式，现在它工作正常
是的，HTML5 可以。试试这个代码 (w3school)：
<!DOCTYPE html>
<html>
<body>
<form action="">
Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5" />
<input type="submit" />
</form>
</body>
</html>
看到最小和最大参数了吗？我使用 Chrome 19（有效）和 Firefox 12（无效）进行了尝试。
设置 step="any" 。工作正常。参考：http://blog.isotoma.com/2012/03/html5-input-typenumber-and-decimalsfloats-in-chrome/
目前，无法阻止用户仅使用 HTML 在您的输入中写入十进制值。你必须使用javascript。
var valKeyDown;
var valKeyUp;
function integerOnly(e) {
e = e || window.event;
var code = e.which || e.keyCode;
if (!e.ctrlKey) {
var arrIntCodes1 = new Array(96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 8, 9, 116); // 96 TO 105 - 0 TO 9 (Numpad)
if (!e.shiftKey) { //48 to 57 - 0 to 9
arrIntCodes1.push(48); //These keys will be allowed only if shift key is NOT pressed
arrIntCodes1.push(49); //Because, with shift key (48 to 57) events will print chars like @,#,$,%,^, etc.
arrIntCodes1.push(50);
arrIntCodes1.push(51);
arrIntCodes1.push(52);
arrIntCodes1.push(53);
arrIntCodes1.push(54);
arrIntCodes1.push(55);
arrIntCodes1.push(56);
arrIntCodes1.push(57);
}
var arrIntCodes2 = new Array(35, 36, 37, 38, 39, 40, 46);
if ($.inArray(e.keyCode, arrIntCodes2) != -1) {
arrIntCodes1.push(e.keyCode);
}
if ($.inArray(code, arrIntCodes1) == -1) {
return false;
}
}
return true;
}
$('.integerOnly').keydown(function (event) {
valKeyDown = this.value;
return integerOnly(event);
});
$('.integerOnly').keyup(function (event) { //This is to protect if user copy-pastes some character value ,..
valKeyUp = this.value; //In that case, pasted text is replaced with old value,
if (!new RegExp('^[0-9]*$').test(valKeyUp)) { //which is stored in 'valKeyDown' at keydown event.
$(this).val(valKeyDown); //It is not possible to check this inside 'integerOnly' function as,
} //one cannot get the text printed by keydown event
}); //(that's why, this is checked on keyup)
$('.integerOnly').bind('input propertychange', function(e) { //if user copy-pastes some character value using mouse
valKeyUp = this.value;
if (!new RegExp('^[0-9]*$').test(valKeyUp)) {
$(this).val(valKeyDown);
}
});
step="any" 或正浮点数 指定元素值的值粒度。
因此，您可以简单地将其设置为 1：
发布它，如果将来有人需要它
const negativeValuePrevent = (e) => {
const charCode = e.which ? e.which : e.keyCode;
if(charCode > 31 && (charCode < 48 || charCode > 57)
&& charCode !== 46){
if(charCode < 96 || charCode > 105){
e.preventDefault();
return false;
}
}
return true;
};
大多数答案都已过时。
以下不再起作用：
<!-- It doesn't invalidate decimals when using validators -->
<input type="number" min="0" step="1" />
以下解决方案更加优雅和直接，并且适用于截至 2022 年初的所有最新浏览器。
<!-- It DOES invalidate decimals when using validators -->
<input type="number" pattern="\d*" />
简短且用户友好
该解决方案以直观的方式支持制表符、退格、回车、减号
但是它不允许将已经输入的数字更改为减号，也不允许处理复制粘贴的情况。
作为替代方案，您可以使用基于 R. Yaghoobi answer 的解决方案，该解决方案允许放置减号并处理复制粘贴大小写，但当用户键入禁止字符时它会删除整数
整数输入意味着它只能接受正数、0 和负数。这就是我能够使用 Javascript 按键实现这一目标的方式。
<input type="number" (keypress)="keypress($event, $event.target.value)" >
keypress(evt, value){
if (evt.charCode >= 48 && evt.charCode <= 57 || (value=="" && evt.charCode == 45))
{
return true;
}
return false;
}
给定的代码不允许用户在运行时输入字母或小数，只能输入正负整数值。
在 Future™（参见 Can I Use）中，在向您提供键盘的用户代理上，您可以使用 input[inputmode] 将文本输入限制为仅数字。
inputmode 主要用于手持设备，会触发正确的键盘布局，但对于带有键盘的“普通”计算机，它不会阻止输入您想要的任何内容。
min设置为1，因为他想要正数（而不是非负数）。