如何将这个jquery代码块重构成一个块

Question

我有一些像这样的jquery代码:

$("#inputMobile").keypress(function(event){
var ew = event.which;
if(48 <= ew && ew <= 57)
return true;
if(65 <= ew && ew <= 90)
return true;
if(97 <= ew && ew <= 122)
return true;
alert("Change your keyboard language to English");
});
$("#inputEmail").keypress(function(event){
var ew = event.which;
if(48 <= ew && ew <= 57)
return true;
if(65 <= ew && ew <= 90)
return true;
if(97 <= ew && ew <= 122)
return true;
alert("Change your keyboard language to English");
});

正如你所看到的，主要函数是相同的，但输入id不同，因为我想将它应用到两个输入字段。

所以我的问题是，我如何将这段代码重构成一个函数块并删除多余的代码?

Answer 1

回调函数是相同的，所以只需将选择器合并为一个。

$("#inputMobile, #inputEmail").keypress(function(event){
var ew = event.which;
if(48 <= ew && ew <= 57)
return true;
if(65 <= ew && ew <= 90)
return true;
if(97 <= ew && ew <= 122)
return true;
alert("Change your keyboard language to English");
});

注意.which已弃用。最好使用.key或.code来检查按下了哪个键。您还可以将检查压缩成一个简洁的正则表达式。

$("#inputMobile, #inputEmail").keypress(function(event){
if (/[da-z]/i.test(event.key)) {
return true;
}
alert("Change your keyboard language to English");
});

您还可以考虑使用适当的模态而不是alert，并且即使在英语键盘上也可以按非字母数字字符。更精确的消息应该是"只允许使用字母数字字符。">

Answer 2

function handleKeypress(id){
$(`#${id}`).keypress(function(event){
var ew = event.which;
if(48 <= ew && ew <= 57)
return true;
if(65 <= ew && ew <= 90)
return true;
if(97 <= ew && ew <= 122)
return true;
alert("Change your keyboard language to English");
});
}

现在你可以随意调用handleKeypress("inputMobile")和handleKeypress("inputEmail")。

希望有帮助

Answer 3

const handler = function(event) {
var ew = event.which;
if (48 <= ew && ew <= 57)
return true;
if (65 <= ew && ew <= 90)
return true;
if (97 <= ew && ew <= 122)
return true;
alert("Change your keyboard language to English");
};

["#inputMobile", "#inputEmail"].forEach(selector -> $(selector).keypress(handler));