按鍵事件不適用於 addEventListener 函數

Question

我有一個 ID 為mobileNumber的輸入字段，它只需要數字作為輸入，所以我編寫了一個函數（事件處理函數）來檢查輸入。 但是，如果您通過addEventListener函數添加該函數，它將不起作用，但是如果您通過onkeypress屬性添加它，則它起作用..

例如

<input type="text" class="insidetxt" placeholder="Mobile Number" name="mobile number" id="mobileNumber">

 //input field;

 var isNumeric =function (event){
     var specialKeys = new Array();
        specialKeys.push(8); //Backspace
        var keyCode = event.which ? event.which : event.keyCode
        var ret = ((keyCode >= 48 && keyCode <= 57) || specialKeys.indexOf(keyCode) != -1);  
        return ret;
  }; 

  //this function check whether the input character is digit or not


 eventObj["isNumeric"] = function (event){
     var specialKeys = new Array();
        specialKeys.push(8); //Backspace
        var keyCode = event.which ? event.which : event.keyCode
        var ret = ((keyCode >= 48 && keyCode <= 57) || specialKeys.indexOf(keyCode) != -1);  
        return ret;
  }; 

//event obj contains the function to check, same functionality 

(function(eventObj){
  var mobileInput =  document.getElementById("mobileNumber");
  mobileInput.addEventListener("keypress", eventObj["isNumeric"], false);
})(eventObj);

如果我像這樣添加事件偵聽器，則會調用該函數，但也不限制用戶輸入字符；

但如果我喜歡這樣：

<input type="text" class="insidetxt" placeholder="Mobile Number" name="mobile number" id="mobileNumber" onkeypress="return isNumeric(event); ">

這工作正常

第二種方式我做錯了嗎？

Answer 1

是的，第二種方法不是最佳實踐。 Html 屬性可以更改或繞過，因此最好添加事件偵聽器。

Answer 2

得到了解決方案，.. 需要在 ret 變量為 false 時阻止 defaultBehaviour

eventObj["isNumeric"] = 函數（事件）{

 var specialKeys = new Array();
    specialKeys.push(8); //Backspace
    var keyCode = event.which ? event.which : event.keyCode
    var ret = ((keyCode >= 48 && keyCode <= 57) || specialKeys.indexOf(keyCode) != -1);  
    if(!ret)
        event.preventDefault();

};