核心是让type服务于交互意图：按语义精准选型（email/url/number/date/search/color），禁用废弃类型；自定义控件需动态readonly+aria补全；约束须前后端双校验；降级默认为text并配兼容策略。
移动端表单输入类型与键盘唤起，核心不是“选对 type”，而是“让 type 服务于交互意图”。规范的关键在于统一语义、控制行为、兜住降级，而不是堆砌新特性。
按字段语义精准选用 type
每个输入框的 type 必须反映它要收集的真实数据类型，而非仅看“是不是数字”或“有没有符号”：
-
邮箱地址：固定用
type="email"，不使用text+ 正则校验。它能触发带 @ 和 .com 的软键盘，且提交时自动校验基础格式（如含 @ 和域名结构）； -
网址链接：用
type="url"，避免text。移动端会显示 .com / .cn 快捷键，浏览器也校验协议头（http/https 或省略）； -
纯整数（如年龄、数量、ID）：优先
type="number" pattern="[0-9]*"。iOS 下[0-9]*是唯一能稳定唤起九宫格数字键盘的写法；type="tel"虽也弹数字键盘，但允许输入 +、-、() 等符号，需额外过滤； -
日期/时间类：严格按粒度选 —— 年月日用
type="date"，仅小时分钟用type="time"，年月用type="month"。禁用已废弃的datetime； -
搜索场景：用
type="search"，自带清除按钮和语义化，iOS 还默认启用首字母大写关闭； -
颜色选择：直接
type="color"，不自建色盘。系统控件更一致、可访问性更好。
禁止键盘弹出的场景必须显式干预
当 input 只是触发自定义控件（如日历弹层、城市选择器、扫码入口），而非真实文本输入时，不能依赖 readonly 一禁了之——那会丢失焦点反馈，也不利于可访问性。应采用动态 readonly 方案：
- 聚焦瞬间设
readonly，100ms 内移除，既阻止键盘又保留光标闪烁； - 配合
pointer-events: none或user-select: none防止误触编辑； - 确保自定义控件有明确的 ARIA 标签（如
aria-label="选择出生日期"），替代原生 input 的语义缺失。
强制输入约束必须前后端双保险
HTML5 的 min/max/pattern 属于“提示性约束”，用户仍可通过粘贴、开发者工具绕过：
- 前端用
input事件实时过滤非法字符（例如监听type="number"的粘贴内容，剔除小数点或负号）； - 所有关键字段（如手机号、金额、身份证号）必须在提交前调用
checkValidity()并结合setCustomValidity()统一错误文案； - 后端绝不信任前端 type 或 pattern，必须独立做格式解析与范围校验（如用正则验证手机号是否符合运营商号段）。
兼容性兜底与渐进增强策略
规范中必须明确降级边界，避免“不支持就崩”：
- 所有新 type（如
date、color）默认按text渲染，不加 polyfill 强制覆盖； - 对 date 类型，若项目需强一致性，统一引入轻量日历库（如 flatpickr），并通过
type="text"+readonly+ 自定义图标触发，而非混用原生与 JS 控件； - 团队共享一份
input-type-mapping.json配置表，标注各 type 在 iOS/Android 主流 WebView 中的支持率与键盘表现差异，供评审时快速查证。
