纯html无法实现电话号码实时格式化，必须用javascript监听input事件并手动控制值与光标位置；直接赋值value会导致光标跳至末尾，需保存selectionstart/end并在格式化后用setselectionrange恢复，并根据分隔符增减调整偏移量。
纯 HTML 无法实现电话号码的实时格式化，type="tel" 和 pattern 都只影响校验或软键盘唤起，不改变输入内容的显示形式。必须用 JavaScript 监听 input 事件并手动控制值与光标位置。
为什么直接赋值 value 会导致光标跳到末尾
浏览器在 input.value = xxx 后会重置光标到字符串末尾，用户在中间修改时（比如删掉第 5 位）会瞬间跳到最右，体验极差。关键是要保存修改前的 selectionStart 和 selectionEnd，格式化后再用 setSelectionRange() 恢复，并根据插入/删除的分隔符数量调整偏移量。
常见错误现象包括：
- 用户在
138-1234-5678中把1234改成9999，结果光标卡在最后，输完变成138-1234-5679999 - 粘贴
13812345678后自动加短横，但光标停在开头或中间某处，继续输入就错位 - 退格键删掉
-后没拦住，导致13812345678变成1381234567却没重新分段
多个电话输入框如何统一处理
不能用 document.getElementById() 或 getElementsByClassName()（它返回的是动态 HTMLCollection，不支持 forEach）。必须用 document.querySelectorAll('.phone-input') 获取静态 NodeList，再遍历绑定事件。
实操建议：
- 给所有目标输入框加统一类名，如
class="phone-input"，避免依赖 ID - 格式化逻辑抽成独立函数（如
formatPhoneNumber(value)），不耦合 DOM 操作 - 每个输入框单独维护自己的光标状态，不要共享变量
- 注意 IE9+ 兼容性：
querySelectorAll和setSelectionRange均支持
中国手机号格式化的核心逻辑怎么写
不是简单地每 3–4 位加 -，要按实际长度分段判断，且优先提取纯数字再重组，避免残留空格或括号干扰。
推荐逻辑（以 138-1234-5678 为例）：
- 用
value.replace(/\D/g, '')清掉所有非数字字符 - 按数字长度分段：
raw.length > 0 ? raw.slice(0, 3) : ''、raw.length > 3 ? '-' + raw.slice(3, 7) : ''、raw.length > 7 ? '-' + raw.slice(7, 11) : '' - 拼接后计算新增字符数（比如加了两个
-），再用setSelectionRange(oldStart + addedCount, oldEnd + addedCount) - 对
backspace和delete键做特殊判断：若光标前是-，应跳过该字符继续删数字
座机号要不要用单个输入框格式化
不要。座机号结构复杂（区号+本地号），混在一个 input 里强行格式化极易出错，比如用户复制带空格的 021 12345678，正则匹配失败，语音读屏混乱，后端解析困难。
更可靠的做法是拆成两个字段：
-
<input name="area_code" pattern="0[1-9]\d{1,2}" inputmode="numeric">—— 强制以 0 开头，2~4 位 -
<input name="phone_number" pattern="\d{7,8}" inputmode="numeric">—— 7~8 位本地号 - 拼接提交前，用
replace(/[\u2000-\u206F\u2E00-\u2E7F\uFE2E\uFE2F\s]+/g, '')清理不可见空格（如微信粘贴进来的 U+202F） - 后端仍需白名单校验区号（如
['010', '021', '0755']），不能只信前端
真正难的不是写正则，而是光标位置的精确计算和不同输入行为（输入、粘贴、退格、选中替换）的分别处理；漏掉任意一种，用户就会觉得“这个输入框很卡”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
