如何只允许在 input[type="number"] 字段中输入数字？

Question

我有一个输入字段，用户应该只能在其中输入数字 [0-9]。

document.getElementById("integer").addEventListener('input', restrictToInteger);
function restrictToInteger() {
    this.value = this.value.replace(/[^\d]/g, '');
}

<input type="number" id="integer" />

jsFiddle Demo

问题是这样的：当我输入一个数字（例如1234）然后按点（.），+或-输入字段的内容被浏览器自动删除（值设置为"" = 空字符串）。但为什么？将类型从 number 更改为 text 似乎可以解决问题。但是后来我失去了输入字段的向上/向下箭头功能。有什么想法吗？

Answer 1

HTML 4 有一个名为onkeypress 的事件。有了这个属性，我们可以在不使用额外 JS 的情况下做到这一点：

<input type="number" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57">

此处从0 到9 的数字允许使用从48 到57 的event.charCode。

Answer 2

我认为浏览器清除输入值的原因是因为带有两个点的字符串不是数字。

关于您的代码的一些更正：

如果您想接受带小数部分的数字，您需要更改表达式正则。现在，您只是表示您想接受数字 [0-9] 而不再接受字符。

要完成您想要的，您需要将/[^\d]/g 更改为/[^\d.]/g。

document.getElementById("integer").addEventListener('input', restrictToInteger);

function restrictToInteger()
{
  this.value = this.value.replace(/[^\d.]/g, '');
}

<input type="number" id="integer" />

但是：如果您将输入定义为数字类型，则不需要正则表达式。因此，您只需要像这样定义输入，并且应该根据您的情况：

<input type="number" id="integer" />

[解决方案]

为了完全满足您的需求，我提供了一个解决方案，可以捕获输入的 keydown 事件并检查是否有任何 '.'在输入上。如果是，我会阻止字符进入输入。

document.getElementById("integer").addEventListener('keydown', restrictToInteger);
var lastCodeWasDot = false;
function restrictToInteger(e)
{
   var inputValue = document.getElementById("integer").value;
   var isDot = false;
   var isDot = (e.keyCode && e.keyCode == 110) || (e.charCode && e.charCode == 190);
   console.log(e.keyCode);
   if(isDot && (inputValue.indexOf(".") > -1 || inputValue == "" || lastCodeWasDot)) {
       e.preventDefault();
   }
   lastCodeWasDot = isDot;
   
}

<input type="number" id="integer" />

解释解决方案：

需要var isDot = (e.keyCode && e.keyCode == 110) || (e.charCode && e.keyCode == 190) || false;这行代码，因为跨浏览器兼容性。

我现在不知道为什么，但是如果您尝试从 Firefox 中的输入数字类型中获取值，并且如果该值以点结尾，那么您将获得的值将没有输入的最后一个点.为了解决这个问题，我需要添加变量lastCodeWasDot 来解决这个问题。

注意：数字输入可以接受浮点数，包括负号和 e 或 E 字符（查看this 帖子）

Answer 3

根据Alexandru-Ionut Mihai 和natchiketa 的回答，我创建了以下解决方案：

document.getElementById("integer").addEventListener("input", allowOnlyDigits);

function allowOnlyDigits() {  
  if (this.validity.valid) {
    this.setAttribute('current-value', this.value.replace(/[^\d]/g, ""));
  }
  this.value = this.getAttribute('current-value');
}

<input type="number" id="integer" />

在输入时检查值的有效性。如果它是有效的，那么所有的非数字都被移除并且值被存储在元素的一个自定义属性中。如果该值无效，则恢复之前的值。

注意事项：

• RegEx 替换仅适用于 Internet Explorer，因为它允许您在数字末尾输入 , 或 .。
• 在 IE、Edge、Chrome 和 Firefox 中测试
• Chrome 仍允许您在数字前输入 +，在数字后输入 ,。
• 我发现了一个问题：如果使用值初始化字段，当您第一次在键盘上敲击无效字符时，该值会丢失。
• 另一个问题：您不能输入负数。

Answer 4

唯一的问题是您的输入类型。将其更改为text，它应该可以工作！

function validate(e) {
    var charCode = e.keyCode? e.keyCode : e.charCode
    if (!(charCode >= 48 && charCode <= 57)) {
        if(!(charCode>=37 && charCode<=40))
            if(charCode!=8 && charCode!=46)
            return false;
    }
}

<input type="number" id="integer" pattern="[0-9]"
onkeydown="return validate(event)"/>

Answer 5

您可以通过copying输入的旧值并使用setAttribute和getAttribute方法来存储这些值来实现您的要求。

function myFunction(input){
  input.setAttribute('current-value',"");
  input.oninput=function(){  
      let currentValue=input.getAttribute('current-value');
      if(input.value!='' || (currentValue>=1 && currentValue<=9))
        input.setAttribute('current-value',input.value);
      input.value=input.getAttribute('current-value');
  }
}

<input type="number" oninput="myFunction(this)"/>
<input type="number" oninput="myFunction(this)"/>
<input type="number" oninput="myFunction(this)"/>
<input type="number" oninput="myFunction(this)"/>
<input type="number" oninput="myFunction(this)"/>

Answer 6

当您调用oninput 时，<input> 元素首先调用其内部方法来处理该值。这可以防止您的函数看到任何实际的错误字符，即 e+-. - 所有这些都被 JavaScript 用于格式化数字。

您可以通过在更改 this.value 之前和之后添加 console.log 调用来看到这一点。

console.log(this.value);
this.value=this.value.replace(/[^\d]/g, '');
console.log(this.value);

没有任何区别！

如果你尝试，例如：

console.log(this.value);
this.value+=1; // or *=2 for numerical fun
console.log(this.value);

你可以看到不同。

因此，您的函数正在加速正常的内部调用 <input type='number'/> 在处理非法输入时通常会进行。

不太明白为什么该字段为空而不是1。

Answer 7

我会切换到cancelable 事件，例如keydown。
这样一来，您就可以防止输入字符：

var cancelEvent = function (e) {
    e.preventDefault();
    return false;
},
restrictToInteger = function restrictToInteger(e) {
    var acceptableInput = /[0-9]/g,
        clipboardKeys = /[zxcv]/ig,
        field = e.key || e.char,
      isClipboardOperation = (clipboardKeys.test(field) && e.ctrlKey),
        inputIsAcceptable = field ? (
            acceptableInput.test(field)
            || field.length > 1
            || isClipboardOperation
        ) : true;

    if (!inputIsAcceptable) {
        cancelEvent(e);
    }
},
ensureIntegerValueOnPaste = function ensureIntegerValueOnPaste(e) {
	var data = e.clipboardData || e.dataTransfer,
  		text = data.getData('text'),
        int = parseInt(this.value + text, 10);

    if (isNaN(int)) {
        cancelEvent(e);
    } else {
        window.setTimeout(function () {
            e.target.value = int;
        }, 0);
    }
},
input = document.getElementById("integer");

input.addEventListener('keydown', restrictToInteger);
input.addEventListener('drop', ensureIntegerValueOnPaste);
input.addEventListener('paste', ensureIntegerValueOnPaste);

<input type="number" id="integer" />

更新小提琴：https://jsfiddle.net/838pa8hv/2/

免责声明：

• 仅在 Chrome 中测试。
• field.length > 1 的测试是捕获有效的非数字键，因为向上/向下箭头的值分别为 ArrowUp 和 ArrowDown。这也允许按下 Shift（或 Home、Backspace、Delete 等）等键。

编辑： 要处理粘贴（和掉落），您可以在相应的事件中执行相同的操作。 Updated fiddle 和上面的代码 sn-p。

编辑：
如果预期的可用性是能够将部分数字粘贴/拖放到字段和以不允许负整数，那么您只需更改int 在ensureIntegerValueOnPaste 函数中的定义方式。 Updated fiddle 和上面的代码 sn-p。

Answer 8

你不需要正则表达式，你可以使用parseFloat()函数。您的输入类型保持不变，仍然有“箭头”来增加/减少数字，并且它确保您的输入不会从零开始。

document.getElementById("integer").addEventListener('input', restrictToInteger);
function restrictToInteger() {
  this.value = parseFloat(this.value);
}

<input type="number" id="integer" />

Answer 9

您必须检查该值是否不是数字然后停止用户。

document.getElementById("integer").addEventListener('input', restrictToInteger);

function restrictToInteger(e)
{
  if(isNaN(e.data)){
     alert("only numbers allowed");
  }
}

<input type="number" id="integer" />