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

使用模式属性

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

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

FIDDLE

Answer 3

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

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

step="any"

到

step="1"

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

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

修改：一种更好的方法。按键事件为deprecated。还添加了一个正则表达式以去除粘贴上数字[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 7

你们可以试试这个此功能不允许用户粘贴不需要的字符，也不允许用户输入。+-E

var inputBox = document.getElementById("inputBox");
            
                var invalidChars = [
                    "-",
                    "+",
                    "e",
                    "."
                ];

                inputBox.addEventListener("input", function() {
                    this.value = this.value.replace(/[e\+\-\.]/gi, "");
                });
                

                inputBox.addEventListener("keydown", function(e) {
                    if (invalidChars.includes(e.key)) {
                        e.preventDefault();
                    }
                });

<input type="number" id="inputBox" >

`

如果您的JS中出现错误。您可以添加 `$(document).ready(function() { code });

Answer 8

一个简单的正则表达式可以帮助解决此问题。

var re = new regExp('[.]+) ;
if(!re.test(num)){listOfNumbers.push(num)};

不允许用户输入“。”当您处理多种文化和'。'的解释时，输入上的输入可能不是一个可行的选择。

Answer 9

<input type="number" onkeydown="return event.keyCode !== 190">

这将限制句点（。）输入对于任何键限制： https://css-tricks.com/snippets/javascript/javascript-keycodes/

Answer 10

@Html.TextBoxFor(model => model.num, new { @class = "form-control input-sm",@maxlength = 5 ,@oninput = "this.value = this.value.replace(/[^0-9]/g, '');"})

在MVC中，上述解决方案有效。

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

10 个答案: