如何使用事件监听器在 javascript 中添加多个 id？

Question

我有一个表格，其中包含姓名、姓氏、phone 和其他字段。所有字段都有唯一的 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">

Answer 1

使用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">

Answer 2

您对事情的运作方式做出了一些错误的假设。

首先，getElementById() 做它在罐头上所说的 - 它得到一个元素（单数），而不是一个节点列表。它不接受多个 ID，它接受一个。这就是为什么：

document.getElementById('name phone')

或任何其他指定多个 ID 的方法，将导致该方法返回 null。您需要：

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

但是，returns是一个nodelist，而addEventListener()是HTMLElement对象的方法，不是nodelist对象，所以不能运行它在那里并期望它将事件绑定到所有返回的元素。

你有两个选择：

1 遍历节点列表并将事件绑定到每个元素

2 使用 event delegation

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

如何使用事件监听器在 javascript 中添加多个 id？

How to add multiple id in javascript with eventlistener?

javascript

getelementbyid

addeventlistener

getelementsbyname