移动端输入体验差主因是未正确使用 input 的 type 和配套属性；type="tel" 比 type="number" 更适合手机号，因其稳定唤起拨号键盘、保留特殊字符且兼容性好。
移动端输入体验差，八成是因为没用对 input 的 type 和配套属性——不是 JS 写得少，是语义没传达到系统层。
为什么 type="tel" 比 type="number" 更适合手机号
写 type="number" 本意是弹数字键盘，结果在 iOS 上小数点变成逗号、粘贴被禁、前导零被吞，甚至某些 WebView 里触发微调按钮遮挡输入框。这不是 bug，是规范行为。
-
type="tel"才是唤起拨号键盘最稳的方式，iOS/Android Chrome 都识别，还保留*和#键 - 它不强制格式校验，允许空格、括号、
+，配合pattern="[0-9+\-\s()]{7,20}"做轻量提示即可 - 别加
inputmode="numeric"——多此一举，iOS 忽略，安卓可能冲突 - 真机测试必须覆盖：iPhone Safari + Android Chrome + 微信 X5 内核（X5 对
type="tel"支持好，但对type="number"表现极不稳定）
搜索框必须用 type="search" 而非 text + enterkeyhint
enterkeyhint="search" 是提示，不是指令；iOS Safari 对 type="text" 的支持极差，软键盘大概率还是显示「前往」或「回车」。
- 只有
type="search"才能稳定触发「搜索」键、自动添加清除按钮、原生触发search事件 - 监听提交时，优先用
element.addEventListener('search', handler)，别只靠keydown判断event.key === 'Enter' - CSS 可控清除按钮：
input[type="search"]::-webkit-search-cancel-button { display: none; } - 注意：部分安卓 WebView 会多出 × 按钮，若 UI 不需要，需显式隐藏
邮箱和 URL 键盘的真实表现与限制
type="email" 和 type="url" 在不同平台差异极大，不能默认“写了就生效”。
立即学习“前端免费学习笔记（深入）”；
- iOS Safari（哪怕 16.4+）对
type="email"基本不响应 @ 键快捷入口，尤其用户切到中文拼音后，@ 直接消失 -
type="url"在 iOS 上确实把空格键换成.和/，还有.com键；但 Android（尤其微信 X5）基本无变化 - 它们只做基础格式校验（如
u@x过email），不能替代正则，强校验仍需pattern或 JS - 若要提升输入效率，
autocomplete="email"比类型本身更可靠——它让键盘主动带出历史邮箱项
金额、评分等带小数字段的正确写法
别用 type="number" 接收金额或带小数的值。iOS 会转小数点为逗号，valueAsNumber 在动态改 type 后失效，滑动 spinner 在移动端几乎没人用。
- 推荐：
<input type="text" inputmode="decimal" pattern="[0-9.]*">，再用parseFloat()处理值 -
inputmode="decimal"不等于支持负数——减号不在多数软键盘默认布局里，用户得手动切键盘找 - 要支持负数？老实用
type="text"+oninput过滤 + 提交前正则校验 -
min/max/step在移动端基本无效，iOS 不渲染 spinner，安卓体验差，别依赖
真正卡住体验的，从来不是功能有没有，而是语义有没有被系统准确接收——type 属性是 HTML 和操作系统之间最短的那条信道，写错一个字母，软键盘就可能弹错。
