如何让number类型input输入框保留输入的前导零不被自动截断？

你遇到的前导零自动丢失问题是<input type="number">的原生特性：这类输入框默认将输入内容解析为数值类型，而数值本身的前导零没有语义，浏览器会自动剔除。

方案1：更换输入框类型为text（最推荐） #

这种方案兼容性最好、逻辑最稳定，同时可以保留原有的数字输入限制，不会出现非数字输入的问题：

<!-- 修改后的input代码 -->
<input 
  type="text" 
  name="search_number" 
  id="search_number"  
  pattern="[0-9]\d*"  
  inputmode="numeric"
  class="form-control form-control-sm"
>

改动说明：

• 把type="number"改为type="text"，让输入框以字符串形式存储内容，自动保留前导零
• 新增inputmode="numeric"属性，移动端打开输入框时依然会调出数字键盘，和原输入体验完全一致
• 保留原有pattern="[0-9]\d*"校验规则，依然限制用户只能输入数字，不会出现非数字字符

如果需要在前端实时禁止非数字输入，可以额外加输入监听：

document.getElementById('search_number').addEventListener('input', function(e) {
  this.value = this.value.replace(/[^0-9]/g, '')
})

方案2：若必须保留type="number"属性 #

如果因为其他业务逻辑必须使用type="number"，可以通过js额外存储原始输入值，提交表单时取用存储的原始值：

<input 
  type="number" 
  name="search_number" 
  id="search_number"  
  pattern="[0-9]\d*"  
  class="form-control form-control-sm"
  data-raw-value=""
>

const input = document.getElementById('search_number')
// 监听按键事件捕获原始输入
input.addEventListener('keydown', function(e) {
  // 忽略退格、方向键、回车等功能按键
  if (['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Enter'].includes(e.key)) return
  // 拦截非数字输入
  if (!/[0-9]/.test(e.key)) {
    e.preventDefault()
    return
  }
  // 拼接存储原始输入值
  this.dataset.rawValue = this.dataset.rawValue + e.key
})
// 处理退格删除逻辑
input.addEventListener('keydown', function(e) {
  if (e.key === 'Backspace' || e.key === 'Delete') {
    this.dataset.rawValue = this.dataset.rawValue.slice(0, -1)
  }
})
// 表单提交时直接取data-raw-value的属性值提交即可

注意：该方案存在边界兼容问题，比如用户选中部分内容删除、粘贴输入等场景需要额外做适配，因此优先推荐方案1。

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