如何使用 addEventListener (keyup) 而不是 HTML 中的 onkeyup 属性获得相同的结果？

Question

我想通过正则表达式限制输入文本。在第一个示例中，我在 HTML 中使用属性 onkeyup = "lettersOnly(this)"，如下所示：

<form>
<label for="username">Choose a Username:</label>
<input type="text" name="username" id="username" onkeyup="lettersOnly(this)">
</form>

<script>
function lettersOnly(input){
            var regex = /[^a-z]/gi;
            input.value = input.value.replace(regex, "");
        }
</script>

它有效，但我了解到这是一种不好的做法。我找到了其他解决方案来避免这种情况，并在<script> 标签内设置someVariable.onkeyup。但是，我的目标是使用addEventListener ('keyup', lettersOnly, false) 找到另一种获得相同结果的方法。我针对这种特定情况进行了很多研究，但没有答案。可能吗？我尝试了以下方法：

<form>
<label for="username">Choose a Username:</label>
<input type="text" name="username" id="username">
<!--No more “onkeyup” attribute.-->
</form>   

<script>
function lettersOnly(input){
        var regex = /[^a-z]/gi;
        input.value.addEventListener('keyup', lettersOnly(input){
        input.value = input.value.replace(regex, "");
          }, false)
        }
</script>

不起作用。我的意图是避免在 html 中使用事件处理程序，而是使用 addEventListener。最后一个编码有什么问题？为什么不起作用？非常感谢您的耐心等待。

Answer 1

在您说您尝试过的代码中；函数lettersOnly() 永远不会被调用，addEventListener() 永远不会被调用。

你可以简单地改变它如下 -

<script>
    function lettersOnly(input){
        var regex = /[^a-z]/gi;
        input.value = input.value.replace(regex, "");
    }
    document.getElementById("username").addEventListener("keyup", lettersOnly(this), false);
</script>

Answer 2

最后，我找到了自己的解决方案，我想分享它。

<form>
<label for="username">Choose a Username:</label>
<input type="text" name="username" id="username">
<!--No more “onkeyup” attribute.-->
</form>  
<script>
  let user = document.getElementById("username");
  var regex = /[^a-z]/gi;
   
  user.addEventListener("keyup", ()=>{
  user.value = user.value.replace(regex, "");
})
  // The “user” variable has been just to simplify a lot of repeated coding, as it is equivalent to “document.getElementById(“username”).
</script>

我不知道这是否是解决我的询问的最佳和最佳方式，但它有效。根本没有“ONkeyup”，而是使用addEventListener ("keyup", anonymous arrow function)。如果有人有任何其他建议，我将不胜感激。