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

我有一个输入字段，用户只能在其中输入数字

[0-9]

document.getElementById（“整数”）.addEventListener（“输入”，restrictToInteger）；
函数restrictToInteger（）{
this.value=this.value.replace（/[^\d]/g'，）；
}

---

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

关于代码的一些更正：

若要接受带小数部分的数字，则需要更改正则表达式。现在，您只需要表示希望接受数字[0-9]而不接受更多字符

要实现您想要的目标，您需要将

/[^\d]/g

更改为

/[^\d.]/g

document.getElementById（“整数”）.addEventListener（“输入”，restrictToInteger）；
函数restrictToInteger（）
{
this.value=this.value.replace（/[^\d.]/g'，）；
}

---

唯一的问题是您的输入类型。将其更改为

text

，它应该可以工作

功能验证（e）{
var charCode=e.keyCode？e.keyCode:e.charCode
如果（！（charCode>=48&&charCode=37&&charCode您可以通过复制输入的旧值，并使用
setAttribute
和
getAttribute
方法来存储值，从而达到您的要求


函数myFunction（输入）{
input.setAttribute（'current-value'，“”）；
input.oninput=function（）{
让currentValue=input.getAttribute（'current-value'）；
如果（input.value！=''||（currentValue>=1&¤tValue您不需要正则表达式，您可以使用
parseFloat（）
函数。您的输入类型保持不变，仍然有“箭头”来增加/减少数字，并且它确保您的输入不会以零开始


document.getElementById（“整数”）.addEventListener（“输入”，restrictToInteger）；
函数restrictToInteger（）{
this.value=parseFloat（this.value）；
}
我会切换到一个
可取消的
事件，比如
keydown


这样，您就可以防止首先键入字符：


var cancelEvent=函数（e）{
e、 预防默认值（）；
返回false；
},
restrictToInteger=功能限制ToInteger（e）{
var acceptableInput=/[0-9]/g，
剪贴板键=/[zxcv]/ig，
字段=e.key | | e.char，
isClipboardOperation=（剪贴板键测试（字段）和&e.ctrlKey），
inputIsAcceptable=字段(
可接受输入。测试（字段）
||字段长度>1
||Isclipboard手术
)：正确；
如果（！inputIsAcceptable）{
取消事件（e）；
}
},
ensureIntegerValueOnPaste=函数ensureIntegerValueOnPaste（e）{
var data=e.clipboardata | | e.dataTransfer，
text=data.getData（'text'），
int=parseInt（this.value+text，10）；
if（isNaN（int））{
取消事件（e）；
}否则{
setTimeout（函数（）{
e、 target.value=int；
}, 0);
}
},
输入=document.getElementById（“整数”）；
input.addEventListener（'keydown'，restrictToInteger）；
input.addEventListener（'drop'，EnsureIntegraterValueOnPaste）；
input.addEventListener（'paste'，EnsureIntegraterValueOnPaste）；
当您调用
oninput
时，
元素首先调用其内部方法来处理该值。这可以防止函数看到任何实际的错误字符，即
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);

你可以看到不同

因此，您的函数正在加速处理非法输入时通常会进行的正常内部调用

不太明白为什么该字段留空，而不是
1
。
您必须检查该值是否不是数字，然后停止用户


document.getElementById（“整数”）.addEventListener（“输入”，restrictToInteger）；
功能限制集成器（e）
{
if（isNaN（e.data））{
警报（“仅允许数字”）；
}
}
基于的答案，我创建了以下解决方案：


document.getElementById（“整数”）.addEventListener（“输入”，allowOnlyDigits）；
函数allowOnlyDigits（）{
if（this.validity.valid）{
this.setAttribute（'current-value'，this.value.replace（/[^\d]/g，”）；
}
this.value=this.getAttribute（'current-value'）；
}
HTML4有一个名为
onkeypress
的事件


演示中未出现。在chrome中输入dotVerified JSFIDLE时，输入未清除，输入字段的内容未清除。无效值不随输入返回字符串number@JennyO“Reilly什么浏览器消失了？@JennyO'Reilly根据w3c规范<代码>[…]如果指定了value属性且该属性不为空，则该属性的值必须是有效的浮点数。[…]
，因此您只能在有效的情况下获取
此值。如何报告无效输入取决于浏览器。我知道它与问题末尾提到的type='text'一起工作。；-）使用此方法时，箭头键功能丢失。虽然我知道使用js可以很容易地模拟它。@JennyO'Reilly我已更新了我的答案，很抱歉我错过了您上次的答案line@JennyO“Reilly navigate是什么意思？对不起。我的意思是，你不能再使用箭头键在字段内移动光标了。@JennyO'Reilly I”如果你有更多的问题，请随意填写。问题就这么简单