从 "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&nbsp;addEventListener("keypress", (event)=>{，如果要使用，请this使用functionlikeaddEventListener("keypress", function(event) {经过一番研究发现，document.querySelector("#login-first-name").addEventListener("keypress"需要用 with 来event.returnValue代替return.&nbsp;有关更多信息，请参阅此。也更新了代码。在下面检查它。document.querySelector("#login-first-name").addEventListener("keypress", (event) => {&nbsp; 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() {&nbsp; this.value = this.value.charAt(0).toUpperCase() + this.value.slice(1);});<input id='login-first-name' />