如何为Bootstrap数字输入框添加前导零填充，点击上下箭头保持固定位数

原生type="number"输入框默认会自动丢弃前导零，你可以通过监听输入事件，每次值变更后手动格式化补零即可实现需求，参考实现如下：

<!-- 给输入框加id方便获取DOM，保留原有类和初始值 -->
<input type="number" class="form-control" value="00001" id="fixedNumInput" />

<script>
const numInput = document.getElementById('fixedNumInput');
// 按需修改你需要保留的总位数，此处对应5位长度
const FIXED_DIGIT = 5;

numInput.addEventListener('input', function() {
  // 先提取输入的有效数字
  const currentNum = parseInt(this.value, 10);
  if (isNaN(currentNum)) return;
  // 补前导零到指定位数后赋值回输入框
  this.value = String(currentNum).padStart(FIXED_DIGIT, '0');
})
</script>

补充说明 #

• 该方案同时支持点击上下箭头调整、手动输入两种操作场景，都会自动补全前导零
• 如果需要限制数值范围，可配合原生min/max属性使用，也可以在格式化逻辑中新增范围判断，避免数值超出预期

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