如何避免输入类型编号中的十进制值

Question

如何避免在HTML5中输入Number的十进制值.目前,它允许用户键入十进制值.

Answer 1

提供答案的替代方法是在输入中监控按键.我个人喜欢把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>

Answer 2

我最终检查了用户是否输入了一段时间，然后阻止了该事件的传播。

编辑：更好的方法。按键事件已被弃用。还添加到正则表达式中以去除粘贴时除数字 [0-9] 之外的所有内容。

<input type="number" onkeydown="if(event.key==='.'){event.preventDefault();}"  oninput="event.target.value = event.target.value.replace(/[^0-9]*/g,'');">

小心实验。仅部分适用于 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,'');} " >

Answer 3

使用模式属性

<input type="number" name="num" pattern="[0-9]" title="Numbers only">

有关详细信息,请访问http://www.w3schools.com/tags/att_input_pattern.asp

小提琴

Answer 4

使用 parseInt() 的简单示例

<input type="number" oninput="this.value=(parseInt(this.value)||0)" placeholder="0-9" autofocus='' value='0' />

Answer 5

根据此处的其他答案，我尝试了以下操作：

<input id="storeId" min="0" pattern="[0-9]" onkeypress="return !(event.charCode == 46)" step="1" title="Must be an integer number" type="number" >

我只是阻止了点的输入，但这同样不会阻止粘贴。

ASCII 点。字符是 46

Answer 6

提问时您应该发布您尝试过的内容。

要仅使用整数，请更改以下属性。

step="any"

到

step="1"