如何在JavaScript中为多个ID元素添加EventListener事件监听器

嘿，我明白你的问题啦！你之前尝试用document.getElementById('name phone')来同时选中多个元素是行不通的——因为getElementById只能接受单个ID值，空格分隔的话它会把整个字符串当成一个ID去查找，自然找不到元素，也就会抛出"cant read property addEventListener"的错误了。

下面给你两种简单可行的解决方案，帮你给多个输入框绑定相同的事件监听：

方案1：通过多个ID选择元素并循环绑定 #

我们可以用document.querySelectorAll来一次性选中多个指定ID的元素，然后遍历这些元素逐个绑定事件。首先把你的事件处理逻辑抽成一个独立函数，这样复用起来更方便：

// 抽离事件处理函数，方便复用
function blockEnglishInput(e) {
  if ((e.charCode >= 97 && e.charCode <= 122) || (e.charCode >= 65 && e.charCode <= 90)) {
    alert("لطفا فارسی تایپ کنید"); 
    e.preventDefault(); 
  }
}

// 选择需要绑定的多个输入框
const targetInputs = document.querySelectorAll('#name, #inputLastName, #phone');

// 遍历每个元素，绑定事件监听
targetInputs.forEach(input => {
  input.addEventListener('keypress', blockEnglishInput);
});

// 保留你原有的波斯语验证函数
function isPersian(str){ 
  var p = /^[\u0600-\u06FF\s]+$/; 
  return p.test(str); 
}

方案2：利用类名批量绑定（更推荐） #

看你的HTML结构，所有需要限制的输入框都有field这个类，直接通过类名选择元素会更灵活——以后新增需要限制的输入框，只要给它加上field类，不用修改JS代码就能自动生效：

function blockEnglishInput(e) {
  if ((e.charCode >= 97 && e.charCode <= 122) || (e.charCode >= 65 && e.charCode <= 90)) {
    alert("لطفا فارسی تایپ کنید"); 
    e.preventDefault(); 
  }
}

// 通过类名选择所有目标输入框
const targetInputs = document.querySelectorAll('.field');

targetInputs.forEach(input => {
  input.addEventListener('keypress', blockEnglishInput);
});

function isPersian(str){ 
  var p = /^[\u0600-\u06FF\s]+$/; 
  return p.test(str); 
}

这两种方法都能解决你的问题，方案2更适合后续扩展。如果还有其他疑问，随时问哦！

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