input[type="color"]能用，但必须同时满足value为7位小写十六进制、监听input事件、浏览器真正支持三条件；否则静默变黑或降级为文本框。
input[type="color"] 能用，但必须同时满足三个条件：value 是标准 7 位小写十六进制、监听 input 事件、浏览器真正支持该类型；缺一就会静默变黑、不触发、或直接降级为文本框。
value 必须是 #rrggbb 格式，否则浏览器静默重置为 #000000
这个控件对输入值极其敏感。哪怕只差一个字符，都会失效：
-
input.value = "ff0000"（缺#）→ 浏览器忽略，UI 显示黑色 -
input.value = "#FF0000"（大写）→ Chrome/Edge 可能渲染异常，Safari 直接回退 -
input.value = "#f08"（缩写）或"rgb(255,0,0)"或"#ff000080"（带 alpha）→ 全部静默转成#000000 - 服务端返回的颜色值，必须提前标准化：补
#、转小写、展开缩写（#abc→#aabbcc） - 从
localStorage恢复时，先校验value.length === 7 && value[0] === '#'，否则 fallback 到默认色
监听 input 事件才能实时响应拖拽和点击
change 事件在用户确认选择（点“确定”或失焦）后才触发一次，完全无法捕获中间状态：
- 用户在 Chrome/Edge 调色盘中拖动滑块时，
input每次变动都触发；Safari 15.4+ 虽只在释放后触发一次，但仍比change及时 - Vue/React 中仅靠
v-model或受控value属性，无法捕获拖拽过程中的中间值，必须显式绑定input事件 - 移动端 iOS Safari 15.4+ 默认点击热区极小，建议用
<label></label>包裹或加padding扩大可点击区域 - 某些旧版 Android WebView 只认
change，稳妥起见可同时监听两个事件，或统一用change（牺牲实时性换兼容性）
浏览器兼容性差，检测和降级必须手动做
IE 全系、Safari ≤14.0、iOS Safari ≤15.3 完全不识别 type="color"，渲染为空白或普通文本框，且不触发任何事件：
- 运行时检测：
const isColorSupported = document.createElement('input').type === 'color';，返回false就得降级 - 降级不能只是
type="text"，而应提供带预览色块的文本输入 + 正则校验（pattern="#[0-9a-fA-F]{6}"） + 实时同步逻辑 -
::-webkit-color-swatch只在 Chromium 系浏览器生效，用于微调预览方块圆角/边框；它不能改弹窗本身，Safari/Firefox 完全无视 - 需要透明度、历史色板、HSV 模式、取色器（eyedropper）等功能？原生控件做不到，必须换
vanilla-picker或手写 canvas 方案
最易被忽略的点是：value 读取永远标准化为小写 7 位 hex（如 #4a90e2），哪怕你初始化用的是 #49e 或 #4A90E2；这个行为影响数据库存值、颜色比对、以及从 CSS getComputedStyle 提取颜色后的转换逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
