input type="color" 必须用小写7位十六进制格式（如"#4a90e2"），否则在Safari或旧Android WebView中退化为文本框；需同时监听input和change事件，并注意透明度需额外用range控件配合。
input type="color" 能用，但必须按浏览器认的规则来写，否则在 Safari、旧版 Android WebView 里直接退化成文本框，甚至不触发事件。
value 必须是小写 7 位十六进制格式
浏览器只接受以 # 开头、长度为 7 的小写字母+数字组合，比如 "#4a90e2"。其他形式都会被忽略或重置为 "#000000"：
-
input.value = "ff0000"❌ 缺少#，无效 -
input.value = "#FF0000"❌ 大写，在部分 Safari 中色块不更新 -
input.value = "rgb(255,0,0)"❌ 完全不支持，强制 fallback -
input.value = "#f00"✅ 合法简写，会被自动标准化为"#ff0000"
从 CSS 读颜色（如 getComputedStyle(el).backgroundColor）通常返回 rgb()，得先转成小写 7 位 hex 才能安全赋值给 input.value。
input 和 change 事件都要监听
input 事件能响应拖拽过程中的实时变化，但旧版 Android WebView 和某些 iOS Safari 只触发 change。只绑 input 会导致这些环境完全无响应：
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
picker.addEventListener('input', handler)+picker.addEventListener('change', handler) - 统一用
change也可以，但得提醒用户“离开控件才生效”，体验略差 - 别依赖
e.inputType或e.isTrusted判断来源，它们在colorinput 中不可靠
预览色块同步失败的常见原因
把 picker.value 赋给 element.style.backgroundColor 看似简单，但容易卡在几个细节上：
- 手动 JS 赋值后 UI 不变？确认新值已通过
input.value = "#4a90e2"写入，且 DOM 已挂载 - 预览
div始终黑色？检查是否遗漏style="width:60px;height:60px;"——没宽高则渲染为空白 - Safari 中色块显示异常？确保
input有value属性（哪怕设为"#000000"），否则可能留白 - 服务端存的颜色值与前端不一致？记住
picker.value永远返回小写 7 位格式，"#4A90E2"和"#49e"都会变成"#4a90e2"
需要透明度时别硬改 color input
input type="color" 天然不支持 alpha，加 rgba() 或 hsla() 会直接失效：
- 务实方案：加一个
input type="range" min="0" max="1" step="0.01"控制opacity，和colorinput 组合使用 - 拼接时用
data-color存 hex，data-alpha存透明度，再合成rgba(r,g,b,a)应用 - 如果项目已用 React/Vue，优先考虑封装好的专业颜色组件，原生控件扩展成本高
最常被忽略的是 value 格式校验和双事件绑定——这两个点一漏，就不是“不好用”，而是“在某些设备上根本不动”。
