type="color"需运行时检测：创建input元素并设type="color"，若读取type仍为"color"才真支持；iOS Safari等返回"text"且不弹面板；input事件跨平台不一致，Safari仅支持change；它不能作吸管工具，无法读取图像像素颜色。
input 的 type="color" 在支持的浏览器中能直接唤起系统级拾色器，但不是所有环境都可靠——它在 Chrome、Firefox、Edge（Chromium）桌面端和部分 Android 浏览器中表现正常；iOS Safari、旧版 UC、微信内置浏览器、IE 等则完全不支持，会降级为普通文本框。
怎么判断浏览器是否真正支持 type="color"
不能只靠 typeof HTMLInputElement.prototype.type 或简单渲染就认为可用。必须运行时检测元素的 type 属性值是否仍为 "color"：
- 用
document.createElement("input")创建临时节点，设置type = "color"，再读取其type值：若返回"color"才算真支持 - 直接查已存在的
input[type="color"]元素：el.type === "color"为true才可绑定交互逻辑 - 注意：Safari（包括 macOS 和 iOS）即使渲染出颜色方块，
el.type也常返回"text"，且不弹面板
input 事件 vs change 事件的触发差异
实时反馈场景下，input 事件是刚需，但它的行为跨平台不一致：
- Chrome/Firefox：拖动色盘、滑动亮度条、点击色块时持续触发
input，e.target.value始终是小写#rrggbb格式 - iOS Safari / 微信 WebView：
input事件完全不触发，只能监听change（仅在确认或失焦后触发一次） - Android 某些 WebView（如旧版 UC）可能既不触发
input也不触发change，需 fallback 到blur或定时轮询value
为什么不能把 input[type="color"] 当吸管工具用
它根本不是“取色器”，而是“颜色输入器”：
立即学习“前端免费学习笔记（深入）”；
- 不访问图像数据，无法读取 canvas 或 img 元素任意像素的颜色值
- 不响应鼠标坐标，无法实现“点击页面某处取该点颜色”的交互
- 返回值固定为 7 字符十六进制（如
#ff8040），不带 alpha，也不接受rgba()或颜色关键字 - 如果真要从图片里取色，必须用
canvas.getContext("2d").getImageData(x, y, 1, 1)手动读取像素
最易被忽略的一点：即使你写了 <input type="color">，在不支持的环境里它不会报错，也不会提示，只是静默退化为文本框——用户能手动输入 #abc，但失去所有可视化交互。所以兼容性检测和降级方案（比如加载 vanilla-picker）不是“可选项”，而是上线前必做的检查项。
