如何让type为number的input输入数字仅显示加空格、存储无空格且长度为10？

DevOps 小满

2026-10-3

解决方案

核心问题说明

<input type="number"> 本身的特性决定了浏览器会自动过滤空格等非数值类字符，所以直接在值中插入空格的方案无法生效。可采用展示字段与实际提交字段分离的方案，完美匹配所有需求。

实现代码

HTML 部分

<!-- 后端提交用隐藏字段，type为number，值永远为无空格的10位纯数字 -->
<input type="number" id="phoneReal" name="phone" hidden>
<!-- 用户可见的输入展示框，做格式化显示，自动唤起数字键盘 -->
<input type="text" id="phoneDisplay" inputmode="numeric" placeholder="请输入手机号" maxlength="13">

JS 逻辑部分

const phoneDisplay = document.getElementById('phoneDisplay');
const phoneReal = document.getElementById('phoneReal');

phoneDisplay.addEventListener('input', function() {
  // 提取纯数字，移除所有空格
  let pureNum = this.value.replace(/\s/g, '');
  // 限制纯数字长度最长为10位
  if (pureNum.length > 10) pureNum = pureNum.slice(0, 10);
  // 同步纯数字到实际提交字段
  phoneReal.value = pureNum;

  // 按3-4-4格式拼接空格
  let formatValue = '';
  if (pureNum.length > 7) {
    formatValue = `${pureNum.slice(0,3)} ${pureNum.slice(3,7)} ${pureNum.slice(7)}`;
  } else if (pureNum.length > 3) {
    formatValue = `${pureNum.slice(0,3)} ${pureNum.slice(3)}`;
  } else {
    formatValue = pureNum;
  }
  // 回显格式化后的值
  this.value = formatValue;
});