input 的 type 属性需兼顾语义、校验与移动端体验：type="tel" 触发数字键盘并提升可访问性，type="number" 存在 valueAsNumber 异常及动态改 type 导致状态重置风险，date/time 类型在 Safari 和旧安卓中降级为文本框，email/url 仅作轻量前端校验，不可替代后端验证。
input 标签的 type 属性不是“列个清单选一个就行”，而是要按语义、校验需求和移动端体验三者共同决定——选错 type，轻则触发不了软键盘正确布局，重则绕过浏览器原生校验、埋下表单兼容性坑。
type="tel" 和 type="text" 在移动端表现差异极大
很多人以为 type="text" 能通用，但实际在 iOS/Android 上，type="tel" 会唤出数字键盘（带 * # 键），而 type="text" 默认是全键盘。更关键的是：type="tel" 不触发浏览器邮箱/URL 类型的自动校验，也不会阻止用户输入字母（这点常被误认为“失效”）；但它能让屏幕阅读器识别为电话字段，且部分浏览器支持 inputmode="numeric" 进一步约束输入习惯。
type="number" 的 valueAsNumber 和动态修改 type 的陷阱
type="number" 看似适合数字输入，但要注意：
- 输入非数字字符（如 "123abc"）时，
valueAsNumber返回NaN，但value仍为字符串 - 用 JavaScript 动态修改
input.type（比如从"text"改成"number"），会导致valueAsNumber突然失效或返回0，且已输入内容可能被清空或解析异常 - 某些安卓浏览器对
step、min、max支持不一致，建议后端仍做范围校验
date/time 类型在 Safari 和旧版 Android 上不渲染选择器
type="date"、type="datetime-local"、type="time" 在 Chrome/Firefox 中表现良好，但在 Safari（尤其 iOS 15 及更早）和部分国产安卓 WebView 中，会退化为普通文本框，且不触发日期选择器。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
应对方式：
- 必须搭配
inputmode="numeric"或pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}"做基础格式提示 - 用 Modernizr 或特性检测判断是否支持：
const supportsDate = typeof document.createElement('input').type === 'date' - 降级方案优先用第三方库（如 flatpickr），而非自己写年月日下拉
email/url 类型只做前端轻量校验，不能替代后端验证
type="email" 和 type="url" 会在提交时触发浏览器原生校验，但规则极宽松：
-
type="email"接受a@b、test@localhost等明显非法格式 -
type="url"允许缺协议（如example.com），甚至接受http://这种空路径 - iOS Safari 对
type="email"会自动补全@和.com，但用户仍可手动删掉
所以这些类型的价值主要在：软键盘适配 + 用户感知 + 防低级误输，绝不能跳过后端正则或 DNS/HTTP 校验。
真正容易被忽略的点是：同一个 input 元素，type 改变后，其关联的 DOM 属性行为（如 valueAsNumber、files、selectionStart）会不可预测地重置或失效——这不是 bug，是规范明确规定的“type 切换即重建内部状态”。
