Html 如何避免输入类型编号中的十进制值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37043867/
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 avoid Decimal values in input type number
提问by Kumar
How to avoid Decimal values from input of Number in HTML5. Currently it allows user to type decimal value.
如何避免 HTML5 中 Number 输入的 Decimal 值。目前它允许用户输入十进制值。
回答by kneeki
An alternative to the supplied answers is to monitor the keypress while in the input. I personally like leaving the type="number"as an attribute. Here's a JSFiddle
提供的答案的替代方法是在输入时监视按键。我个人喜欢将 保留type="number"为一个属性。这是一个JSFiddle
<form action="#" method="post">
Numbers: <input name="num"
type="number"
min="1"
step="1"
onkeypress="return event.charCode >= 48 && event.charCode <= 57"
title="Numbers only">
<input type="submit">
</form>
回答by Deepu Sasidharan
Use patternattribute
使用模式属性
<input type="number" name="num" pattern="[0-9]" title="Numbers only">
For more details http://www.w3schools.com/tags/att_input_pattern.asp
回答by Stevenfowler16
I ended up checking to see if a user types in a period then preventing the event from propagating.
我最终检查了用户是否输入了一段时间，然后阻止了该事件的传播。
Edit: A better approach. The key press event has been deprecated. Also added in a regex to strip out everything but numbers [0-9] on paste.
编辑：更好的方法。按键事件已被弃用。还添加到正则表达式中以去除粘贴时除数字 [0-9] 之外的所有内容。
<input type="number" onkeydown="if(event.key==='.'){event.preventDefault();}" oninput="event.target.value = event.target.value.replace(/[^0-9]*/g,'');">Caution Experimental. Only partially works on chrome: Wanted to look at a great way to grab the pasted value strip everything out then have it placed in input as normal. With the above method you are relying on the event order to correct the input, then any event listeners will ideally fire after. The onpaste method will fire before the input event fires so you keep the flow of events correct. However when replacing the string with only numbers the decimal point would still sneak in. Looking to update this when I find a better solution.
小心实验。仅部分适用于 chrome：想看看一种很好的方法来抓取粘贴的值，将所有内容都剥离出来，然后将其正常放入输入中。使用上述方法，您依靠事件顺序来更正输入，然后理想情况下会触发任何事件侦听器。onpaste 方法将在输入事件触发之前触发，因此您可以保持事件流正确。然而，当只用数字替换字符串时，小数点仍然会潜入。当我找到更好的解决方案时，希望更新它。
<input type="number" onkeydown="if(event.key==='.'){event.preventDefault();}" onpaste="let pasteData = event.clipboardData.getData('text'); if(pasteData){pasteData.replace(/[^0-9]*/g,'');} " >回答by Stevenfowler16
Just plain example using parseInt()
使用 parseInt() 的简单示例
<input type="number" oninput="this.value=(parseInt(this.value)||0)" placeholder="0-9" autofocus='' value='0' />回答by Nigel Fds
Based on other answers here, I tried this:
根据此处的其他答案，我尝试了以下操作：
<input id="storeId" min="0" pattern="[0-9]" onkeypress="return !(event.charCode == 46)" step="1" title="Must be an integer number" type="number" >I just blocked input of dot, but again this does not block paste.
我只是阻止了点的输入，但这同样不会阻止粘贴。
ASCII DOT . character is 46
ASCII 点。字符是 46
回答by Kake_Fisk
You should post what you have tried when asking questions.
您应该在提问时发布您尝试过的内容。
To use integers only, change the following attribute.
要仅使用整数，请更改以下属性。
step="any"
to
到
step="1"
回答by Terrorbladezz
A simple regex can help sort with this issue .
一个简单的正则表达式可以帮助解决这个问题。
var re = new regExp('[.]+) ;
if(!re.test(num)){listOfNumbers.push(num)};
not letting the user type in a '.' on the input might not be a viable option when you are dealing with multiple cultures and interpretations of '.'.
不让用户输入“。” 当您处理多种文化和对“.”的解释时，输入可能不是一个可行的选择。
