如何让Input自动添加分隔符号？基于Pattern属性的进阶需求

要实现无需手动输入.和-、自动格式化编码的原生方案，可以通过监听input事件处理输入内容结合pattern属性验证来完成，不需要依赖任何第三方库。以下是具体实现步骤：

核心思路 #

1. 限制用户仅能输入数字，自动过滤非数字字符；
2. 根据编码格式规则（XX.XX.XX-XXX.XX），在输入达到对应长度时自动插入分隔符；
3. 处理光标位置，避免自动插入分隔符后光标跳转到末尾，保证输入体验；
4. 用pattern属性配合title提示，完成最终格式的验证。

完整代码实现 #

HTML部分 #

<form>
  <label for="code-input">请输入编码：</label>
  <input 
    type="text" 
    id="code-input" 
    placeholder="输入数字自动格式化"
    pattern="^\d{2}\.\d{2}\.\d{2}-\d{3}\.\d{2}$"
    title="编码格式应为：12.01.19-123.45"
    required
    maxlength="13"
  >
  <button type="submit">提交</button>
</form>

JavaScript部分 #

const input = document.getElementById('code-input');

input.addEventListener('input', function(e) {
  // 仅保留输入中的数字字符
  let value = e.target.value.replace(/\D/g, '');
  let formattedValue = '';
  
  // 根据格式规则拼接分隔符
  if (value.length > 0) {
    // 拼接前两位：XX
    formattedValue += value.substring(0, 2);
    // 达到3位及以上，添加第一个.并拼接接下来两位：XX.XX
    if (value.length >= 3) {
      formattedValue += '.' + value.substring(2, 4);
    }
    // 达到5位及以上，添加第二个.并拼接接下来两位：XX.XX.XX
    if (value.length >= 5) {
      formattedValue += '.' + value.substring(4, 6);
    }
    // 达到7位及以上，添加-并拼接接下来三位：XX.XX.XX-XXX
    if (value.length >= 7) {
      formattedValue += '-' + value.substring(6, 9);
    }
    // 达到10位及以上，添加最后一个.并拼接最后两位：XX.XX.XX-XXX.XX
    if (value.length >= 10) {
      formattedValue += '.' + value.substring(9, 11);
    }
  }

  // 记录光标位置，避免格式化后光标跳转
  const cursorPosition = e.target.selectionStart;
  const originalLength = e.target.value.length;
  e.target.value = formattedValue;
  
  // 调整光标位置：输入时随字符后移，删除时保持对应位置
  const newCursorPosition = cursorPosition + (formattedValue.length - originalLength);
  e.target.setSelectionRange(newCursorPosition, newCursorPosition);
});

关键细节说明 #

• 非数字过滤：用replace(/\D/g, '')移除所有非数字字符，确保用户只能输入有效内容；
• 光标位置处理：通过记录格式化前后的输入长度差，动态调整光标位置，避免用户输入或删除时光标乱跑；
• pattern验证：pattern="^\d{2}\.\d{2}\.\d{2}-\d{3}\.\d{2}$"严格匹配目标格式，提交表单时浏览器会自动验证，title属性用于提示用户正确格式；
• 长度限制：添加maxlength="13"限制总输入长度（11位数字+2个.+1个-），避免无效输入。

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