如何通过JS/jQuery实现number输入框实时输入自动补6位前导零

前置说明：<input type="number"> 本身存储的是数字类型值，会自动丢弃前导零，输入过程中无法直接展示带前导零的格式化内容。如果需要实时展示补零效果，建议将输入框type改为text，配合输入过滤限制仅允许输入数字，不影响原有数字输入体验，maxlength="6"属性在text类型输入框上同样生效。

核心实现逻辑 #

• 监听输入框input事件，覆盖手动输入、粘贴、输入法输入等所有内容变更场景，比keyup/keydown事件兼容性更好
• 每次内容变更时先过滤所有非数字字符，避免非法字符输入
• 对纯数字内容做长度截断，最长保留6位
• 用字符串padStart方法自动补前导零，固定总长度为6位
• 修正补零后的光标位置，避免光标自动跳到输入框末尾打断连续输入

原生JavaScript实现代码 #

HTML结构示例：

<input type="text" id="numInput" maxlength="6" placeholder="请输入数字">

JS逻辑：

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

numInput.addEventListener('input', function() {
  // 记录当前光标位置
  const currentCursor = this.selectionStart;
  // 过滤非数字，截断最长6位
  let pureNum = this.value.replace(/\D/g, '').slice(0, 6);
  // 补前导零到6位
  const formatVal = pureNum.padStart(6, '0');
  // 回写格式化后的值
  this.value = formatVal;
  // 计算补零后的光标位置，避免光标跳位
  const offset = formatVal.length - pureNum.length;
  this.setSelectionRange(currentCursor + offset, currentCursor + offset);
});

// 可选：失焦时如果为空默认填充000000，不需要可删除
numInput.addEventListener('blur', function() {
  if(!this.value) this.value = '000000';
});

jQuery实现代码 #

$('#numInput').on('input', function() {
  const inputDom = this;
  const currentCursor = inputDom.selectionStart;
  let pureNum = $(this).val().replace(/\D/g, '').slice(0, 6);
  const formatVal = pureNum.padStart(6, '0');
  $(this).val(formatVal);
  const offset = formatVal.length - pureNum.length;
  inputDom.setSelectionRange(currentCursor + offset, currentCursor + offset);
});

效果说明 #

• 输入12时自动填充为000012
• 输入123时自动填充为000123
• 输入长度超过6位时自动截断，最终长度固定为6位
• 粘贴包含字母、特殊符号的内容时会自动过滤非数字字符
• 输入过程中光标位置保持正常，不会因为补零操作跳转到末尾

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