Question

我有一个标识为mobileNumber的输入字段，它只需要数字作为输入所以，我编写了一个检查输入的函数（事件处理函数）。但是，如果您通过addEventListener函数添加该功能，它将无法正常工作，但如果您通过onkeypress属性添加该功能，则无效。

例如

 //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”] = 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);  
    if(!ret)
        event.preventDefault();

};

keypress事件不能与addEventListener函数一起使用

2 个答案: