时间戳

首页 > 解决方案 > 如何使用 eventlistener 在 javascript 中添加多个 id？

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

问题描述

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

标签： javascriptaddeventlistenergetelementbyidgetelementsbyname

解决方案

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

推荐阅读