如何用JavaScript格式化页面中两个手机号输入框？ID转类实现遇阻

原脚本通过ID选择器可正常单个格式化手机号输入框，但改用类选择器后无法同时处理多个输入框。原代码如下：

<script>
      function formatPhoneNumber(value) {
        if (!value) return value;
        const phoneNumber = value.replace(/[^\d]/g, '');
        const phoneNumberLength = phoneNumber.length;
        if (phoneNumberLength < 4) return phoneNumber;
        if (phoneNumberLength < 7) {
          return `(${phoneNumber.slice(0, 3)}) ${phoneNumber.slice(3)}`;
        }
        return `(${phoneNumber.slice(0, 3)}) ${phoneNumber.slice(
          3,
          6
        )}-${phoneNumber.slice(6, 9)}`;
      }

     function phoneNumberFormatter() {
       const inputField = document.getElementById('phone-number');
       const formattedInputValue = formatPhoneNumber(inputField.value);
       inputField.value = formattedInputValue;
     }
</script>

修改步骤： #

• 保留通用的formatPhoneNumber格式化函数，无需改动
• 调整元素获取逻辑，遍历所有目标输入框
• 给每个输入框绑定实时格式化事件

修改后的完整代码：

<script>
function formatPhoneNumber(value) {
  if (!value) return value;
  const phoneNumber = value.replace(/[^\d]/g, '');
  const phoneNumberLength = phoneNumber.length;
  if (phoneNumberLength < 4) return phoneNumber;
  if (phoneNumberLength < 7) {
    return `(${phoneNumber.slice(0, 3)}) ${phoneNumber.slice(3)}`;
  }
  return `(${phoneNumber.slice(0, 3)}) ${phoneNumber.slice(3, 6)}-${phoneNumber.slice(6, 9)}`;
}

function phoneNumberFormatter(inputField) {
  // 接收单个输入框元素，单独执行格式化
  const formattedInputValue = formatPhoneNumber(inputField.value);
  inputField.value = formattedInputValue;
}

// 页面元素加载完成后初始化所有目标输入框
document.addEventListener('DOMContentLoaded', function() {
  // 获取所有带有phone-number类的输入框
  const phoneInputs = document.querySelectorAll('.phone-number');
  
  // 遍历每个输入框，绑定input事件实现实时格式化
  phoneInputs.forEach(input => {
    input.addEventListener('input', function() {
      phoneNumberFormatter(this);
    });
  });
});
</script>

关键说明： #

1. 将phoneNumberFormatter改为接收单个输入框参数的函数，复用格式化逻辑
2. 使用document.querySelectorAll('.phone-number')获取所有目标输入框，返回的NodeList可直接用forEach遍历
3. 借助DOMContentLoaded确保页面元素加载完成后再绑定事件，避免出现找不到元素的问题
4. 给每个输入框绑定input事件，输入内容时实时触发格式化

注意：需将两个输入框的class属性统一设置为phone-number，例如：<input type="tel" class="phone-number">

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