[英]keypress event not working with addEventListener Function
我有一个 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); ">
这工作正常
第二种方式我做错了吗?
是的,第二种方法不是最佳实践。 Html 属性可以更改或绕过,因此最好添加事件侦听器。
得到了解决方案,.. 需要在 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();
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.