如何创建预定义格式的输入框，仅允许用户填充指定数字位置？

原生JavaScript实现 #

不需要依赖任何库，直接通过监听输入事件处理格式拼接，同时优化光标位置避免输入体验变差：

HTML结构 #

<input type="text" id="phoneInput" placeholder="+1 (___)-___-____" maxlength="16">

JavaScript代码 #

const phoneInput = document.getElementById('phoneInput');

phoneInput.addEventListener('input', function(e) {
  // 提取输入中的所有数字字符，过滤非数字内容
  const digits = this.value.replace(/\D/g, '');
  // 只保留前10位有效数字（+1为固定国家码）
  const validDigits = digits.slice(0, 10);
  
  // 拼接目标格式，用下划线填充未输入的位置
  let formatted = '+1 (';
  formatted += validDigits.slice(0,3).padEnd(3, '_');
  formatted += ')-';
  formatted += validDigits.slice(3,6).padEnd(3, '_');
  formatted += '-';
  formatted += validDigits.slice(6,10).padEnd(4, '_');

  // 保存并调整光标位置，避免格式更新后光标乱跳
  const cursorPos = this.selectionStart;
  this.value = formatted;
  
  // 跳过固定格式字符的位置，保证光标在数字输入区域
  let adjustedPos = cursorPos;
  const fixedCharIndexes = [2, 3, 7, 8];
  fixedCharIndexes.forEach(pos => {
    if (adjustedPos > pos) adjustedPos++;
  });
  this.setSelectionRange(Math.min(adjustedPos, formatted.length), Math.min(adjustedPos, formatted.length));
});

// 提交时提取纯数字手机号（可选）
function getCleanPhone() {
  return phoneInput.value.replace(/\D/g, '');
}

这个方案会自动过滤非数字输入，实时将数字填充到对应位置，下划线作为未输入的占位，同时处理了光标定位问题，输入体验更流畅。

使用成熟库实现（更简便） #

如果不想手动处理光标、粘贴等边缘情况，可以用专门的输入掩码库，比如imask：

步骤1：引入库 #

通过npm安装：npm install imask，或直接在项目中引入本地库文件

代码实现 #

<input type="text" id="phoneInput" placeholder="+1 (___)-___-____">

<script>
const phoneInput = document.getElementById('phoneInput');
const mask = IMask(phoneInput, {
  mask: '+1 (000)-000-0000',
  lazy: false, // 始终显示完整格式占位符
  placeholderChar: '_' // 占位符用下划线
});

// 获取纯数字的手机号
function getCleanPhone() {
  return mask.unmaskedValue;
}
</script>

库会自动处理所有输入场景：过滤非数字、自动填充格式、光标定位、粘贴处理等，代码更简洁，兼容性更好。

额外注意事项 #

• 提交表单时，记得提取纯数字的手机号（两个方案都提供了对应方法），避免把格式字符提交到后端
• 可以添加输入长度验证，比如当数字不足10位时提示用户补全
• 原生方案可进一步优化，比如处理删除键、右键粘贴等特殊操作的兼容性

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