最可靠方案是用javascript监听input事件并正则替换，因type="tel"和pattern仅校验不格式化，无法自动添加分隔符；需用selectionstart/selectionend保存光标、replace(/\d/g,'')提取数字、setselectionrange恢复位置，并特殊处理退格与粘贴。
直接用 JavaScript 的 input 事件监听 + 正则替换最可靠，纯 HTML 无法实现动态格式化（pattern 和 type="tel" 都只校验不格式化）。
为什么不能只靠 input type="tel" 或 pattern
这两个属性只影响表单验证行为和软键盘唤起方式，完全不改变输入内容的显示形式。用户仍会看到连续输入的 11 位数字，比如 13812345678，不会自动变成 138-1234-5678 或 138 1234 5678。浏览器也不提供内置格式化钩子。
用 addEventListener('input') 实时格式化（推荐）
核心逻辑：监听输入、清除非数字字符、按位插入分隔符、防止光标跳变。关键点是必须保存并恢复光标位置，否则用户在中间修改时会跳到末尾。
常见错误现象：value 直接赋值后光标跑到最后；未过滤掉粘贴进来的空格或括号导致格式错乱；退格键删除分隔符后卡住。
- 使用
selectionStart/selectionEnd记录光标位置 - 用
value.replace(/\D/g, '')提取纯数字再重组 - 格式化后调用
setSelectionRange()恢复光标（注意偏移量要按新增字符数调整） - 对
delete/backspace键做特殊判断，避免误删分隔符
示例片段（中国手机号）：
input.addEventListener('input', function(e) {
const raw = this.value.replace(/\D/g, '');
let formatted = '';
if (raw.length > 0) formatted = raw.slice(0, 3);
if (raw.length > 3) formatted += '-' + raw.slice(3, 7);
if (raw.length > 7) formatted += '-' + raw.slice(7, 11);
const oldLen = this.value.length;
const newLen = formatted.length;
this.value = formatted;
// 简化版光标修复（仅适用于追加场景），生产环境需更精细计算
if (raw.length
<h3>用 <code>Intl.NumberFormat</code> 或第三方库？不适用</h3>
<p><code>Intl.NumberFormat</code> 面向数字分组（如千分位），不支持自定义分段规则（如 3-4-4），且无法处理非数值字符串。像 <code>cleave.js</code> 或 <code>imask</code> 虽能用，但引入额外依赖，对简单手机号属于过度设计——尤其当项目已禁用外部库或需严格控制包体积时。</p>
<p>真正容易被忽略的是移动端粘贴行为：用户长按粘贴带空格/括号的号码（如 <code>(138) 1234-5678</code>），此时正则清理必须放在格式化前，且要兼容 iOS 自动补全的 <code>+86</code> 前缀。别假设用户只会老老实实敲数字。</p>前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
