JavaScript只允许数字和特定长度，不允许句点

我需要一段JavaScript的帮助。我有以下代码：

<script>
function FilterInput(event) {
    var keyCode = ('which' in event) ? event.which : event.keyCode;
    isNotWanted = (keyCode == 69);
    return !isNotWanted;
};
function handlePaste(e) {
    var clipboardData, pastedData;
    clipboardData = e.clipboardData || window.clipboardData;
    pastedData = clipboardData.getData('Text').toUpperCase();
    if (pastedData.indexOf('E') > -1) {
        e.stopPropagation();
        e.preventDefault();
    }
};
</script>

---

它允许使用“maxlength”限制空格。

您可以在

filterInput

方法中运行验证检查

document.querySelector（'.input group.form control'）.addEventListener（'keyup'，function（））{
var-keyCode=（'which'在事件中）？event.which:event.keyCode；
isNotWanted=（keyCode==69）；
如果（this.value.length>this.maxLength）{
this.value=this.value.slice（0，this.maxLength）；
}
返回！不需要；
});

客户编号
您可以使用文本类型输入，而不是选择数字类型的输入，其中maxlength属性起作用，如果值不是数字，则使用JavaScript抛出错误。像

if(isNaN(input.value)){ // error code here }

一种方法是捕获输入，检查输入是否通过验证检查，如果通过，则继续，如果未通过，则将其设置为最后一个已知的正确值，如下所示：


var oldValue=”“；
//监听“输入”事件，因为它处理所有按键以及剪切/粘贴
document.getElementById（“myInput”）.addEventListener（“输入”，函数（事件）{
var输入=event.target；
if（验证输入（输入值））{
//用新值更新旧值
oldValue=input.value；
}
否则{
//将值设置为最后一个已知的有效值
input.value=旧值；
}
});
函数validateInput（str）{
//检查长度，如果是数字，如果是整数，如果没有句点
返回/^[0-9]{0,5}$/.test（str）；
}
测试：

尝试键入/粘贴无效输入
纯js和dom操作解决方案

为简单起见，添加Id属性

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

input.value
将始终是字符串。您可能应该检查一下
！而是isNaN（+input.value）
。此外，确保数字是完整的（没有句点），您可以使用多种不同的方法，一种简单的方法是
if（+input.value===Math.floor（+input.value））
为什么在输入之前使用+value？我想在
isNaN
检查中不需要它，但对于第二个检查，您需要它。请参阅我的帖子，用最简单的方式检查（ReGEX）的有效输入，无论它的价值如何，我强烈敦促您考虑框架（如jQuery）并利用框架提供的验证工具，或针对该框架的验证插件。这个例子相对简单…但是还有很多其他的用例非常复杂，你可能不想“重新发明轮子”…你有没有一个例子说明我如何在jQuery中实现这一点？从事件侦听器返回值不是标准化的-它在不同的浏览器中可能表现不同。我尝试了代码片段。它仍然允许字母“e”和周期I wrap
let input=document.getElementById（'in'）；input.addEventListener（'keypress'，函数测试（e）{if（input.value.length==5 | | e.key=='.'）e.preventDefault（）；}）在
中？是的，在定义元素后的任何脚本标记中，例如在您的正文之后，或者最好是外部js文件，无论哪种方式，您都应该很好。这需要做一些工作，因为它抛出了一个类型错误，并且在您的目标ID包含任何特殊字符时，缺少一个“）”错误。最后，我添加了以下行来修复这两个问题：var elmId=“id with hyphen”；函数updateHTML（elmId，value）{var elem=document.getElementById（elmId）；if（typeof elem！='undefined'&&elem！==null）{elem.innerHTML=value；}}}@Ojchris我真的不明白你的意思。我发布的代码是一个实时工作的示例，没有语法错误。ID带有连字符的HTML元素仍然可以有效地传递到
document.getElementById
中，因此我不确定这会给您带来错误的原因。另一件我感到困惑的事情是，为什么要在
输入
元素上设置innerHTML。设置元素值的正确方法是通过
value
属性。除非您没有为
输入设置它
元素？你能详细说明一下你使用这个解决方案的目的吗？我在评论之前投了赞成票。按原样使用您的代码段，我在控制台中得到了“TypeError:document.getElementById（…）为null”。深入研究这个错误，我发现了一些奇怪的原因，js脚本的加载速度比html快，即使脚本放在body标记之前。因此，我使用updateHTML进行空检查。我的输入有一个id jade-field-other-try-0-value，因此在解析TypeError之后，我得到了一个“'）”缺少语法错误。var elm=“edit-field-other-try-0-value”有助于解决这个问题。介于两者之间，我不是Js专家，我可能只是按自己的方式进行了黑客攻击：）@Ojchris“出于某种奇怪的原因，Js脚本的加载速度比html快，即使脚本放在body标记之前”——这是预期的行为。如果在呈现元素之前注册事件处理程序（即之前的JS），则每次都会看到此错误。这就是为什么JS应该在标记之后加载，并在“on document ready”函数callback.mhodges中加载的原因，实际上是在body CLOSING标记之前：）
if(isNaN(input.value)){ // error code here }

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

let input = document.getElementById('in');
input.addEventListener('keypress',function test(e){
    if(input.value.length==5 || e.key=='.')
        e.preventDefault();
});