如何用JavaScript实现HTML表单电话号码输入自动格式化？

直接用原生JavaScript就能搞定，核心思路是监听输入框的输入事件，实时过滤非数字字符并拼接成目标格式，具体代码如下：

// 获取电话号码输入框元素
const phoneInput = document.getElementById('Phone');

// 监听输入事件，实时格式化
phoneInput.addEventListener('input', function(e) {
  // 过滤所有非数字字符，且只保留前10位（符合目标格式的长度）
  const rawDigits = e.target.value.replace(/\D/g, '').slice(0, 10);
  
  // 根据数字长度分段拼接格式
  let formatted = '';
  if (rawDigits.length > 0) {
    formatted = `(${rawDigits.slice(0, 3)}`;
    if (rawDigits.length > 3) {
      formatted += `) ${rawDigits.slice(3, 6)}`;
      if (rawDigits.length > 6) {
        formatted += `-${rawDigits.slice(6, 10)}`;
      }
    }
  }
  
  // 将格式化后的值赋值回输入框
  e.target.value = formatted;
});

代码说明 #

• 过滤非数字：用正则/\D/g匹配所有非数字字符并清空，同时用slice(0,10)限制最多输入10位数字，避免超出格式长度
• 分段拼接：根据输入的数字长度，逐步拼接出(XXX)、(XXX) XXX、(XXX) XXX-XXXX的格式
• 实时响应：用户每输入/删除一个字符，都会触发input事件自动更新显示格式

如果要进一步优化输入体验，还可以添加keydown事件限制输入非数字字符（上面的代码已自动过滤，这一步可选）：

// 可选：禁止输入非数字字符（退格、删除、方向键等控制键除外）
phoneInput.addEventListener('keydown', function(e) {
  const allowedKeys = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab'];
  const isNumberKey = !isNaN(parseInt(e.key));
  if (!allowedKeys.includes(e.key) && !isNumberKey) {
    e.preventDefault();
  }
});

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