如何创建带自动+1前缀且仅允许数字输入的美国手机号HTML输入框

问题根源 #

原代码的核心问题在于每次input事件触发时，会先清除所有非数字字符（包括已生成的+、空格和-），再尝试格式化。这导致：

• 已添加的+1被转成纯数字1，后续格式化时会重复添加+1
• 短数字场景下无法触发格式化正则，导致输入框显示纯数字，退格后格式彻底混乱
• 长度限制与格式化逻辑不匹配，引发退格后异常生成多余1

修复方案 #

以下是修正后的HTML和jQuery代码，实现自动补全+1、限制纯数字输入、逐步格式化的效果：

HTML部分

<input type="text" name="phone-number" maxlength="15" placeholder="+1 xxx-xxx-xxxx">

jQuery部分

$("input[name='phone-number']").on("input", function() {
  // 提取输入中的所有纯数字
  let rawDigits = $(this).val().replace(/\D/g, '');
  
  // 确保数字以美国区号前缀1开头，若用户未输入则自动补全
  let processedDigits = rawDigits.length > 0 && rawDigits[0] !== '1' 
    ? '1' + rawDigits 
    : rawDigits;
  
  // 限制最多保留11位数字（+1后最多10位手机号）
  processedDigits = processedDigits.slice(0, 11);
  
  let formattedValue = '';
  // 根据数字长度逐步生成对应格式
  switch(true) {
    case processedDigits.length === 0:
      formattedValue = '';
      break;
    case processedDigits.length === 1:
      formattedValue = '+1';
      break;
    case processedDigits.length <= 4:
      formattedValue = `+1 ${processedDigits.slice(1)}`;
      break;
    case processedDigits.length <= 7:
      formattedValue = `+1 ${processedDigits.slice(1,4)}-${processedDigits.slice(4)}`;
      break;
    default:
      formattedValue = `+1 ${processedDigits.slice(1,4)}-${processedDigits.slice(4,7)}-${processedDigits.slice(7)}`;
  }
  
  $(this).val(formattedValue);
});

代码说明 #

1. 纯数字提取：先过滤所有非数字字符，确保仅基于有效数字处理格式
2. 前缀补全：自动为用户输入的手机号添加美国区号前缀1，避免用户手动输入
3. 长度限制：最多保留11位数字（+1+10位手机号），防止无效输入
4. 渐进式格式化：根据输入的数字长度动态生成对应格式，从+1逐步过渡到完整的+1 xxx-xxx-xxxx，提升用户体验
5. 避免重复格式化：每次都基于原始纯数字重新生成格式，彻底解决重复添加+1和退格异常问题

内容的提问来源于stack exchange，提问作者mia-alegra5699