javascript - 只允许数字的实时输入文本过滤

Question

你好，我正在尝试使用 javascript 制作实时输入类型 =“文本”过滤器，它只允许数字和点。 我写了

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();
       }
     }

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

如果你有任何问题，我会尽力回答!

附言使用的 keyCode 数字是基于内存的估计值，要获取键码，只需在 google 上快速搜索“ASCII 键码”即可。