仅允许数字的实时输入文本过滤

Question

您好，我正在尝试使用 javascript 制作仅允许数字和点的实时输入 type="text" 过滤器。 我写

Javascript：

<script>
function thirdTaskFunction(evnt) {
    evnt = evnt || window.event;
    var charCode = evnt.which ? evnt.which : evnt.keyCode;
    return /\d/.test(String.fromCharCode(charCode));
}

function thirdTaskFunction(evt) { 
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if(charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    return true;
}

function thirdTaskFunction() {
    var thirdInput = document.getElementById("thirdTaskInputText");
    thirdInput = thirdInput.onchange = thirdTaskFuncion;
    var valid = /^\-?\d+\.\d*$|^\-?[\d]*$/;
    var number = /\-\d+\.\d*|\-[\d]*|[\d]+\.[\d]*|[\d]+/;
    if(!valid.test(this.value)) {
        var compare = this.value.match(number);
        this.value = compare ? compare[0] : '';
    }

}
</script>

HTML：

<div id="thirdTaskDIV">
    <input id="thirdTaskInputText" type="text" placeholder="Type a number" autofocus onkeypressed="return thirdTaskFunction(event);">
</div>

我尝试了很多方法，每一个 thirdTaskFunction() 方法都不起作用，我在 w3schools 上测试了解决方案，所以也许这就是原因？ 但我认为我不记得让它起作用的东西。 而且我知道它与“HTML 文本输入仅允许数字输入”非常相似，但它不起作用.. 所以我希望有人告诉我什么是 pappyn。

Answer 1

在输入字段中只允许数字的一种方法是使用按键事件侦听器。 因此，您需要选择输入字段并为其提供一个事件侦听器，如下所示：

     const inputField = document.querySelector("/*input field id here*/");
     inputField.addEventListener("keypress", function(e){
       if(e.keyCode > 48 && e.keyCode < 57){
         e.preventDefault();
       }
     }

此函数检查按下的键是否与数字键匹配，如果不匹配，则阻止默认操作，在这种情况下，将字符打印到输入字段。

如果您有任何问题，我会尽力解答！

PS 使用的 keyCode 数字是基于内存估计的，要获得关键代码，只需在谷歌上快速搜索“ASCII 关键代码”。

Answer 2

点的事件代码（因为keyCode属性已被弃用，所以不是 keyCode ）是Period并且数字 0 到 9 的事件代码以Digit0 、 Digit1等形式Digit0 。

只需使用keydown事件侦听器检索事件代码，然后使用includes()方法检查当前键是否包含包含“Digit”或“Period”的代码，如果不包含则限制该字符的输入这两个使用preventDefault()像这样：

 const input = document.getElementById('thirdTaskInputText'); function checkKey(e) { if(e.code.includes("Digit") || e.code.includes("Period")) { console.log("valid input"); } else { e.preventDefault(); console.log("not a number!"); } } input.addEventListener('keydown', checkKey)

 <input id="thirdTaskInputText" type="text" placeholder="Type a number">

如果没有控制台日志，您可以使用 bang 运算符将上述代码进一步简化为单个 if 语句! 像这样：

 const input = document.getElementById('thirdTaskInputText'); function checkKey(e) { if(!(e.code.includes("Digit") || e.code.includes("Period"))) e.preventDefault(); } input.addEventListener('keydown', checkKey)

 <input id="thirdTaskInputText" type="text" placeholder="Type a number">