应使用 type="tel" 而非 type="number"：前者唤起含*#的数字键盘、无增减按钮、符合手机号语义；需配合 inputmode="numeric"、pattern、js 实时过滤（input 事件）、autocomplete="tel" 及 label 标签确保体验与可访问性。
用 type="tel" 而不是 type="number"
直接写 <input type="number"> 看似合理，但会触发数字键盘+自动增减按钮，且允许输入负号、小数点，根本不符合手机号语义。用 type="tel" 才是标准做法：它在移动端唤起数字键盘（含 * # 键），不强制校验格式，也不添加无关控件。
注意：type="tel" 不做格式限制，所以必须配合其他手段防乱输。别指望它自动过滤字母或截断长度。
用 inputmode="numeric" + pattern 补强体验
inputmode="numeric" 是比 type="tel" 更精细的控制——它明确告诉浏览器“只期望数字输入”，在部分安卓/iOS 上能进一步优化软键盘布局（比如隐藏符号行）。搭配 pattern="[0-9]{11}" 可让表单提交时触发原生提示（但仅限于提交动作，非实时）。
-
pattern的正则不能带^或$，浏览器会自动锚定 - 国内手机号目前主流是 11 位，但
pattern无法覆盖虚拟运营商号段或携号转网异常情况，仅作基础拦截 - 若需兼容港澳台或国际号码，
pattern应放宽，比如[0-9\s\-\(\)]{7,15}，同时放弃严格位数校验
用 JavaScript 监听 input 事件做实时格式化
用户粘贴、长按删除、IME 输入等场景下，纯 HTML 属性完全失效。必须用 JS 拦截并规范化输入：
input.addEventListener('input', (e) => {
let value = e.target.value.replace(/\D/g, ''); // 清除非数字
if (value.length > 11) value = value.slice(0, 11);
if (value.startsWith('1') && value.length === 11) {
value = value.replace(/(\d{3})(\d{4})(\d{4})/, '$1 $2 $3'); // 加空格分隔
}
e.target.value = value;
});
关键点：
- 用
input事件而非change，后者只在失焦时触发 - 不要用
keydown或keypress做过滤——它们无法捕获粘贴、拖入、语音输入等操作 - 格式化后重置
value会导致光标跳到末尾，如需保留光标位置，得手动记录并恢复selectionStart
别漏掉 autocomplete="tel" 和可访问性
加 autocomplete="tel" 能让支持的浏览器（Chrome、Safari）自动填充已保存的手机号，提升转化率。同时必须配 label 标签（最好用 for 关联），否则屏幕阅读器无法正确播报控件用途。
容易被忽略的是：iOS Safari 对 type="tel" 的 maxlength 支持不稳定，有时仍能输入超长内容；所以服务端校验和 JS 实时截断缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
