如何在JavaScript中使用eventlistener添加多个id？

Question

我有一个表单，包含姓名、姓氏、电话和其他字段。所有字段都有唯一的ID和名称。 现在我有一个禁用在字段中输入英文并向用户显示更改键盘的警报的代码，但我无法将多个ID添加到其中。

例如：我有两个ID为#name和#phone的字段。我想要像这样调用这些ID： document.getElementById('name phone') 但上述代码无法运行并显示“无法读取属性addEventListener”。

我的代码：

    document.getElementById('name').addEventListener('keypress',function(e){

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

    });

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

<input type="text" name="firstname" id="name" class="field form-control" placeholder="Your name">
<input type="text" name="lastname" id="inputLastName" class="field form-control" placeholder="Last name">
<input type="tel" name="phonenumber" id="phone" class="field form-control" placeholder="Phone Number">

- masoud nkh

---

给你的元素添加一个类，然后使用 getElementsByClassName 并循环遍历每个元素，对于每个元素添加你的事件监听器。 - Nick Parsons

Answer 1

您正在对事物工作方式做出一些错误的假设。

首先，getElementById()按其字面意思执行 - 它获取一个元素（单数），而不是节点列表。它不接受多个ID，而是只接受一个。这就是为什么：

document.getElementById('name phone')

使用任何其他指定多个ID的方法都会导致该方法返回null。你需要改为：

document.querySelectorAll('#name, #phone')

然而，这会返回一个节点列表，addEventListener() 是 HTML 元素对象的方法，而不是节点列表对象的方法，因此您不能在其中运行它并期望将事件绑定到返回的所有元素上。

您有两个选项：

1. 遍历节点列表并将事件绑定到每个元素上。 2. 使用事件委托。

document.addEventListener('keypress', function(e) {
    if (!e.target.matches('#name, #phone')) return;
    //your code here
});

- Mitya

Answer 2

使用 querySelectorAll 和 forEach 添加事件。

document.querySelectorAll("#name, #inputLastName, #phone").forEach((ele) => {
  ele.addEventListener("keypress", function (e) {
    if (
      (e.charCode >= 97 && e.charCode <= 122) ||
      (e.charCode >= 65 && e.charCode <= 90)
    ) {
      alert("لطفا فارسی تایپ کنید");
      e.preventDefault();
    }
  });
});

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

<input type="text" name="firstname" id="name" class="field form-control" placeholder="Your name">
<input type="text" name="lastname" id="inputLastName" class="field form-control" placeholder="Last name">
<input type="tel" name="phonenumber" id="phone" class="field form-control" placeholder="Phone Number">

- Siva K V