datalist不兼容的浏览器及降级为select方案

聊到 datalist 的兼容性，最常遇到的问题就是：IE 全系列完全不支持，Safari 15.3 及更早版本只响应键盘操作而不响应鼠标，还有大量旧版 Android WebView 出现建议列表不弹出、option 值失效等各种异常。因此，准备一套降级方案几乎是必须的，关键是如何做到平滑、稳定。

实测情况显示：datalist 在 IE 全版本中完全无法使用；Safari 15.3 及更早版本虽能显示建议框，但鼠标点击无效，用户只能通过键盘方向键加回车选择；部分旧版 Android WebView 还可能出现建议空白或 option 值不匹配的情况。

IE 完全不支持，必须主动降级为 select 方案

IE 根本不识别 datalist 标签，它会将其完全忽略——既不渲染也不报错，静默失效。这意味着不能指望它自动降级为 select。

• 不要尝试用 CSS 隐藏/显示来解决，IE 连 datalist 的内容都不解析
• 降级逻辑需要写在 JavaScript 中，最轻量的检测方式：if (!('list' in document.createElement('input')))
• 降级后需要手动将 option 的 value 迁移到 select 中，同时同步原 input 的值和事件
• 注意：IE 下 select 的 change 事件触发时机与现代浏览器不同，建议用 click 或 focusout 补充监听

Safari 15.4 之前鼠标无法点击，但键盘操作仍可用

Safari ≤15.3 的兼容性属于“半吊子”：建议框能正常渲染，但点击选项没有任何响应。用户只能用 ↑/↓ 加 Enter 来选中——这对于触屏设备和不熟悉键盘操作的用户来说体验很差。

• 检测方式：navigator.userAgent.includes('Safari') && !navigator.userAgent.includes('Chrome')，再配合版本号正则提取
• 无需全量降级，仅针对 Safari ≤15.3 启用 select 替代方案即可
• 如果选择保留 datalist，建议添加 JavaScript：监听 input 的 keydown，拦截 Enter 后手动设置值，避免用户输入后按回车却无法提交
• 记得去掉原 input 的 list 属性，否则 Safari 仍会尝试加载空白的建议框

Android WebView 兼容性碎片化，建议统一检测后处理

许多 Android 系统自带 WebView（尤其是 Android 7.0–9.0 版本），对 datalist 的支持极不稳定：有的不弹建议列表，有的弹出后 option 值为空，更严重的还会导致页面重绘异常。碎片化问题确实令人头疼。

• 可以使用 Modernizr.input.list（需引入 Modernizr），或手写检测函数：const hasDatalist = 'list' in document.createElement('input') && !!document.createElement('datalist').options
• 降级时不必直接替换 DOM，更好的方式是用 JavaScript 动态插入 select 并隐藏原 input，以保持表单结构一致
• 如果业务允许，可以对移动端 UA（包括 WebView）默认启用 select 方案，PC 端继续使用 datalist。这样比运行时检测更稳定
• 一定要用真机测试，模拟器通常无法复现 WebView 的真实行为

归根结底，真正的难点不在于“是否降级”，而在于降级后如何让 select 的交互语义与原 input 保持一致。例如用户本来可以输入任意值，但 select 强制只能选择固定选项；或提交时后端期望的是自由文本而非选项 ID。这些语义差异必须通过 JavaScript 显式桥接，不能简单替换标签了事。