必须主动检测 type="date" 等语义输入类型支持性，不支持时手动替换为轻量日期选择器并同步 value 和 input/change 事件，服务端必须二次校验，polyfill 选型需权衡体积与可控性。
input type="date" 在旧浏览器里直接不显示控件怎么办
它不会报错，也不会降级成文本框——很多 IE11 及更早版本、旧版 Safari 会把 type="date" 当成 type="text"，但连 placeholder 都可能不渲染，用户根本看不出这是日期输入。这不是 bug，是规范明确允许的行为。
- 必须主动检测支持性，不能依赖浏览器自动 fallback
- 用
document.createElement('input').type = 'date'测试后，检查input.type是否仍为'date'（不支持时会被强制设为'text'） - 检测失败时，立刻用 JS 初始化一个轻量日期选择器（比如 flatpickr 或原生
<input type="text">+ 格式提示）
type="email" / "url" 等语义类型在不支持时只当 text 处理，但验证逻辑还在吗
不在。表单提交时的原生校验（checkValidity()、:valid 伪类、提交拦截）全部失效。旧浏览器看到不识别的 type 值，会退化为 type="text"，但不会触发任何格式校验。
- 服务端永远要做二次校验，前端不能信任任何
type带来的“保障” - 需要前端补验证时，别只靠
input.validity.valid，要结合正则（如/^[^\s@]+@[^\s@]+\.[^\s@]+$/）和addEventListener('input', ...) - 注意：iOS Safari 9.3 支持
type="email"但不支持type="tel"的键盘优化，得单独判断
自定义 fallback 的时候，value 值同步和事件监听容易漏哪几处
最常漏的是 change 和 input 事件绑定时机不对，以及 value 赋值后没触发 input 事件，导致 Vue/React 等框架无法响应。
- 替换 input 后，新元素要手动绑定
input、change、blur，老元素的事件监听器不会自动迁移 - JS 赋值给
input.value后，必须手动dispatchEvent(new Event('input', { bubbles: true }))，否则框架收不到更新 - 如果用了 polyfill 库（如 webshim），注意它可能重写
input.valueAsNumber等属性，和原生行为不一致
polyfill 方案选型：webshim vs 自己手写最小 fallback
webshim 功能全但体积大（压缩后 >100KB），且对现代浏览器也注入运行时检测逻辑；手写 fallback 更可控，但得自己处理时区、本地化、键盘导航等细节。
- 如果项目已用 jQuery，
webshim集成成本低，但要注意它默认启用所有模块，需用webshim.activeLang和webshim.loader.basePath按需加载 - 纯静态表单、只需 date/email/tel 支持，手写 fallback 更快：检测不支持 → 替换
type→ 绑定基础事件 → 加 placeholder 提示格式 - 千万别用
document.write或同步 script 注入 fallback，会阻塞页面渲染
真正麻烦的不是加个 fallback，而是不同浏览器对同一个 type 的“不支持”定义不一样：有的忽略 type，有的改写 value，有的静默失败。每次加新 type，都得重新跑一遍主流旧版本测试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
