javascript - 从 "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

您需要添加参数 event喜欢 addEventListener("keypress", (event)=>{如果你想使用 this然后使用 function喜欢 addEventListener("keypress", function(event) {经过一番研究发现，用document.querySelector("#login-first-name").addEventListener("keypress"需要分配event.returnValue而不是 return . For more information refer this.也更新了代码。
请在下面检查。

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' />