仅允许数字输入不通过addEventListener返回false的函数

Question

在我的外部JS文件中，我有以下代码来禁用用户的非数字输入。

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

我想通过addEventListener添加此功能，然后按照

进行操作

document.getElementById("myTextbox").addEventListener("keypress", function (evt) {
    numericInput(evt);
}, false);

我做错了什么？

Answer 1

if语句中的charCode > 48 || charCode < 57部分实际上总是返回true。这是因为每个数字都大于48或小于57.我认为||应该是&&。另一件事，一个数字的最小KeyCode是48，如果用||替换&&，则不包括在内。数字57的最大KeyCode不是。

如果您将charCode > 48 || charCode < 57替换为charCode >= 48 && charCode <= 57，我认为您的代码可以正常运行。

修改 正如Adeneo之前提到的，您必须将return false替换为evt.preventDefault()。

此功能应该有效：

function numericInput(evt) {
   var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode >= 48 && charCode <= 57)
    {
        return true;
    } 
    else 
    {
       evt.preventDefault();
    }
 }

/*    OR:    */


function numericInput(evt) {
  var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode < 48 || charCode > 57) evt.preventDefault();
 }