不能仅靠 el.type === "color" 判断支持性，需运行时双重检测：设 type 后验证值是否保持为 "color"，再通过 setTimeout 修改 value 并 dispatchEvent 检查 input 事件是否触发；任一失败即降级。
怎么检测浏览器是否真正支持 input[type="color"]
不能只靠 el.type === "color" 判断，因为 Safari 15.4–15.6 会返回 "color" 但不触发 input 事件；iOS 模拟器还常假阳性。真机测试才可靠。
推荐用运行时双重检测：
- 创建元素并设
type = "color"，再检查el.type是否仍为"color" - 紧接着监听一次
input事件，用setTimeout触发一次value修改 +dispatchEvent，看事件是否被接收 - 任一环节失败，就视为不支持，走降级路径
为什么不能只用 change 事件监听颜色变化
input[type="color"] 在拖动滑块、点击色盘或键盘编辑 hex 值时，input 事件实时触发；而 change 只在失焦后触发一次——对实时预览、联动样式等场景，会明显卡顿甚至漏掉中间色值。
但旧版 Android WebView（如微信 8.0.32 以下）只认 change，所以得兼容：
立即学习“前端免费学习笔记（深入）”；
- 优先绑定
input事件 - 同时 fallback 绑定
change，并在首次触发后移除input监听器（避免重复） - 别用
click判断“是否打开面板”，它无法区分点击区域，且 iOS 上可能不触发
怎么让自定义预览区接管交互又不破坏可访问性
隐藏原生控件时，display: none 或 visibility: hidden 会让键盘 Tab 和读屏器跳过，必须用视觉隐藏而非逻辑移除：
- 给
input#picker加position: absolute; opacity: 0; pointer-events: none; - 用
<label for="picker"><div class="color-preview"></div></label>包裹预览区，点击即触发原生控件 - 移动端加
touch-action: manipulation防 300ms 延迟 - 预览区需手动同步
aria-valuenow和aria-valuetext，例如aria-valuetext="深蓝色 #4a90e2"
value 格式标准化和降级输入的边界处理
input[type="color"].value 总是返回 7 字符小写 hex（如 "#4a90e2"），但用户可能从文本框输入 "#f08"、"F08"、"rgb(74,144,226)"，这些在原生控件里会被静默忽略或回退为 "#000000"。
降级方案里必须做三件事：
- 输入时用正则
/^#?([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/校验，并自动补全缩写：#f08 → #ff0088 - 赋值前强制转小写、加
#、补足 6 位，再塞给picker.value - 始终保留一个隐藏的
<input type="text" name="color_hex">同步最终值，防止极端 case 下picker.value为空
真正难的不是画个色盘，而是让颜色值在 Safari 15.4 的 change-only 环境、Android WebView 的无事件环境、以及用户手输乱码时，依然能落到一个确定、可提交、无障碍友好的字符串上。
