jQuery HTML5：只接受整数的数字输入类型？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8808590/
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
HTML5: number input type that takes only integers?
提问by JayPea
I'm using the jQuery Tools Validatorwhich implements HTML5 validations through jQuery. It's been working great so far except for one thing. In the HTML5 specification, the input type "number" can have both integers and floating-point numbers. This seems incredibly short-sighted since it will only be a useful validator when your database fields are signed floating-point numbers (for unsigned ints you'll have to fall back to "pattern" validation and thus lose extra features like the up and down arrows for browsers that support it). Is there another input type or perhaps an attribute that would restrict the input to just unsigned integers? I couldn't find any, thanks.
我正在使用 jQuery 工具验证器，它通过 jQuery 实现 HTML5 验证。到目前为止，它一直工作得很好，除了一件事。在 HTML5 规范中，输入类型“number”可以同时包含整数和浮点数。这似乎非常短视，因为只有当您的数据库字段是有符号浮点数时，它才会是一个有用的验证器（对于无符号整数，您将不得不退回到“模式”验证，从而失去额外的功能，例如 up 和 down支持它的浏览器的箭头）。是否有另一种输入类型或可能将输入限制为无符号整数的属性？没找到，谢谢
EDIT
编辑
Ok, guys, I appreciate your time and help, but I see many undeserved up-voting going on :D. Setting the step to 1 is not the answer since it doesn't restrict the input. You can still type a negative floating-point number into the textbox. Also, I am aware of pattern validation (I mentioned it in my original post), but that was not part of the question. I wanted to know if HTML5 allowed restricting an input of type "number" to positive integer values. To this question the answer, it seems, would be "no, it does not". I didn't want to use pattern validation because this causes some drawbacks when using jQuery Tools validation, but it now seems that the specification doesn't allow for a cleaner way to do this.
好的，伙计们，我感谢您的时间和帮助，但我看到许多不值得的投票正在进行 :D。将 step 设置为 1 不是答案，因为它不限制输入。您仍然可以在文本框中键入负浮点数。另外，我知道模式验证（我在原帖中提到过），但这不是问题的一部分。我想知道 HTML5 是否允许将“数字”类型的输入限制为正整数值。对于这个问题，答案似乎是“不，它没有”。我不想使用模式验证，因为这在使用 jQuery 工具验证时会导致一些缺点，但现在似乎规范不允许使用更简洁的方法来执行此操作。
回答by Aurélien Ooms
https://www.w3.org/wiki/HTML/Elements/input/number
https://www.w3.org/wiki/HTML/Elements/input/number
The best you can achieve with HTML only
仅使用 HTML 即可实现的最佳效果
<input type="number" min="0" step="1"/>回答by js-coder
Set the stepattribute to 1:
将step属性设置为1：
<input type="number" step="1" />
This seems a bit buggy in Chrome right now so it might not be the best solution at the moment.
现在这在 Chrome 中似乎有点问题，所以目前它可能不是最好的解决方案。
A better solution is to use the patternattribute, that uses a regular expression to match the input:
更好的解决方案是使用pattern属性，它使用正则表达式来匹配输入：
<input type="text" pattern="\d*" />
\dis the regular expression for a number, *means that it accepts more than one of them.
Here is the demo: http://jsfiddle.net/b8NrE/1/
\d是一个数字的正则表达式，*意味着它接受多个。这是演示：http: //jsfiddle.net/b8NrE/1/
回答by Tarek Kalaji
The easy way using JavaScript:
使用 JavaScript 的简单方法：
<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '');" >
回答by thejustv
<input type="text" name="Phone Number" pattern="[0-9]{10}" title="Phone number">
Using this code, the input to the text field limits to enter only digits. Pattern is the new attribute available in HTML 5.
使用此代码，文本字段的输入仅限于输入数字。Pattern 是 HTML 5 中可用的新属性。
回答by Viktor Karpyuk
Pattern is nice but if you want to restrict the input to numbers only with type="text", you can use oninput and a regex as below:
模式很好，但是如果您想将输入限制为仅使用 type="text" 的数字，则可以使用 oninput 和正则表达式，如下所示：
<input type="text" oninput="this.value=this.value.replace(/[^0-9]/g,'');" id="myId"/>
I warks for me :)
我为我而战 :)
回答by karthick
This is not only for html5 all browser is working fine . try this
这不仅适用于 html5，所有浏览器都可以正常工作。尝试这个
onkeyup="this.value=this.value.replace(/[^0-9]/g,'');"
回答by Noothan y v
Pattern are always preferable for restriction, try oninputand minoccur 1 for inputting only numbers from 1 onwards
对于限制，模式总是更可取的，尝试oninput并min发生 1 只输入从 1 开始的数字
<input type="text" min="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');"
value=${var} >
回答by DevTeamExpress
have you tried setting the stepattribute to 1 like this
你有没有试过step像这样将属性设置为 1
<input type="number" step="1" />
回答by Luca Fagioli
Maybe it does not fit every use case, but
也许它不适合所有用例，但是
<input type="range" min="0" max="10" />
can do a fine job: fiddle.
可以做得很好：fiddle。
Check the documentation.
检查文档。
回答by illeas
Just putting it in your input field : onkeypress='return event.charCode >= 48 && event.charCode <= 57'
只需将它放在您的输入字段中： onkeypress='return event.charCode >= 48 && event.charCode <= 57'
