如何使用addEventListener的keyup事件替代HTML的onkeyup属性实现相同效果

你的代码存在3个核心错误 #

• 事件绑定逻辑位置错误：你把addEventListener的绑定逻辑放在了lettersOnly函数内部，但没有任何入口代码触发这个函数执行，自然不会完成事件绑定，而且你在函数内部又递归调用lettersOnly，逻辑完全混乱。
• 绑定对象错误：addEventListener是DOM元素的原生方法，应该绑定在input输入框对象上，你错误调用了input.value.addEventListener，而input.value是字符串类型，不存在这个方法，会直接抛出JS运行时报错。
• 事件回调参数错误：addEventListener传入的回调函数第一个参数是事件对象event，不是input元素本身，你需要通过event.target属性获取当前触发事件的输入框实例。

正确实现代码 #

HTML部分 #

<form>
  <label for="username">Choose a Username:</label>
  <input type="text" name="username" id="username">
</form>

JavaScript部分 #

// 获取输入框DOM对象
const usernameInput = document.getElementById('username');
// 定义字符过滤函数
function lettersOnly(event) {
  const regex = /[^a-z]/gi;
  event.target.value = event.target.value.replace(regex, "");
}
// 绑定keyup事件
usernameInput.addEventListener('keyup', lettersOnly, false);

优化建议 #

你可以把keyup事件替换为input事件，能覆盖粘贴、自动填充、拖拽输入等所有输入框内容变化的场景，过滤效果更完整，不会出现通过非键盘输入绕过校验的问题。

内容的提问来源于stack exchange，提问作者limakid