原生 <input type="color"> 在 Safari 和多数 WebView 中不可用，因浏览器不支持或降级为文本框；需用 JavaScript 拦截 click 并集成第三方色盘库，手动同步值与事件，且仅支持 #rrggbb 格式。
HTML 原生 <input type="color"> 为什么点不开色盘？
多数情况不是代码写错了，而是浏览器或系统限制导致的：Chrome 和 Edge 在桌面端默认支持，但 Safari 一直不支持（截至 Safari 17），iOS/iPadOS 上该控件会降级为文本输入；部分 Linux 桌面环境（如 GNOME）也无原生色盘弹出。若在 Safari 中看到纯文本框，属于预期行为，不是 bug。
- 检查是否在
<input type="color">上误加了readonly或disabled—— 这会直接禁用交互 - 确保没用 CSS 隐藏了原生控件（比如
appearance: none且未提供自定义 UI） - 移动端 WebView（如微信内置浏览器）常禁用原生色盘，需 fallback 方案
如何让 <input type="color"> 在 Safari 或 WebView 中可用？
不能依赖原生控件时，得用 JavaScript 拦截并唤起第三方色盘库。关键不是“替换”，而是“接管交互”：
- 监听
click事件，调用event.preventDefault()阻止原生行为 - 用轻量库如
vanilla-picker或jscolor动态创建色盘浮层，绑定到同一 DOM 节点 - 选中颜色后，手动设置
input.value并触发input和change事件，保持表单一致性 - 注意 iOS Safari 的
input事件触发时机异常，建议统一用change处理最终值
input[type="color"] 返回的值格式和兼容性坑点
它只返回 7 位小写十六进制字符串（如 "#ff0000"），不支持透明度、hsl、named color 等任何其他格式。一旦用户手动修改 input 值为 "red" 或 "rgba(255,0,0,0.5)"，浏览器会静默重置为默认值（通常是 "#000000"）。
- 不要在 JS 中对
input.value做正则提取或 substring 操作——直接用即可 - 需要 alpha 通道？原生控件做不到，必须换带透明度的色盘（如
chroma.js+ canvas 实现） - 服务端接收前务必校验格式：
/^#[0-9a-f]{6}$/i.test(value)，避免被篡改
要不要自己用 Canvas 写一个颜色拾取器？
除非有强定制需求（比如拾取图片某点颜色、支持 HSV 拖拽、嵌入设计工具 UI），否则不建议。原生 input[type="color"] 的优势是系统级集成：尊重 OS 主题、支持辅助功能（如 VoiceOver）、无需额外 bundle 体积。
- Canvas 实现要处理触摸/鼠标坐标映射、色相环抗锯齿、移动端缩放适配，工作量远超预期
- 拾取图片像素色？用
canvas.getContext('2d').getImageData(x, y, 1, 1)更直接，跟input[type="color"]是两回事 - 真要自研，优先封装成 Web Component，避免污染全局作用域
