从 "onkeypress" 转换为 "addeventlistener

Question

我在输入标签上的 html 中写入了以下 JS 行。我在课堂上学习关注点分离，我们不应该将 JS 放入我们的 html 中。我一直在想办法转换这些行：onkeypress="return (event.charCode >= 65 && event.charCode <= 90) || (event.charCode >= 97 && event.charCode <= 122) || event.charCode == 32;"对于这样的事情：document.querySelector("#login-first-name").addEventListener("keypress",function(event){  return (event.charCode >= 65 && event.charCode <= 90) || (event.charCode >= 97 && event.charCode <= 122) || event.charCode == 32;});任何见解都会很棒。

Answer 1

您需要添加参数eventlike addEventListener("keypress", (event)=>{，如果要使用，请this使用functionlikeaddEventListener("keypress", function(event) {

经过一番研究发现，document.querySelector("#login-first-name").addEventListener("keypress"需要用 with 来event.returnValue代替return. 有关更多信息，请参阅此。也更新了代码。

在下面检查它。

document.querySelector("#login-first-name").addEventListener("keypress", (event) => {

  event.returnValue = (event.charCode >= 65 && event.charCode <= 90) || (event.charCode >= 97 && event.charCode <= 122) || event.charCode == 32;

});

document.querySelector("#login-first-name").addEventListener("keyup", function() {

  this.value = this.value.charAt(0).toUpperCase() + this.value.slice(1);

});

<input id='login-first-name' />