如何为所有指定类名的输入字段绑定事件函数？（JavaScript）

步骤1：抽离可复用的事件函数 #

先把现有逻辑封装成独立的命名函数，方便重复调用：

function checkKey(e) {
  const hpKeyCode = e.keyCode;
  const keyPos = e.target.selectionStart;
  for (let i = 0; i < e.target.value.length; i++) {
    if (e.target.value[i] === "," && keyPos === i + 1 && hpKeyCode === 8) {
      e.preventDefault();
      e.target.selectionStart = keyPos - 1;
      e.target.selectionEnd = keyPos - 1;
    }
  }
}

步骤2：批量绑定事件到所有blah类输入框 #

通过document.querySelectorAll获取所有目标元素，遍历后逐个绑定事件：

// 获取所有类名为blah的输入元素
const inputs = document.querySelectorAll('.blah');

// 遍历绑定事件
inputs.forEach(input => {
  input.addEventListener('keydown', checkKey);
});

关于「e未定义」的报错原因 #

你之前出现这个错误，大概率是用了内联事件绑定（比如在HTML里写onkeydown="checkKey()"），这种写法如果没手动传递event参数，函数里的e就会未定义。上面用addEventListener的方式会自动把事件对象传递给函数，不会有这个问题。

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