原生 不支持手动输入 hex 值，chrome/firefox 仅提供色盘，safari 降级为无校验文本框；可靠方案是用 + 正则校验（/^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i），自动补全#、转小写、同步预览与 color input，并处理 safari 事件不触发等兼容性问题。
HTML 原生 <input type="color"> 无法输入 hex 值，必须 fallback
原生 <input type="color"> 在 Chrome/Firefox 中只提供调色面板，不支持手动输入 #ff0000 这类 hex 值；Safari 甚至不支持该类型（降级为文本框但无颜色预览）。用户想粘贴或敲 hex 值时，会直接失败或被浏览器静默截断。
- Chrome：点击后弹出色板，
value只能通过色块更改，input事件不触发键盘输入 - Safari：渲染为普通
<input type="text">，但不会校验格式，#xyz或rgb(255,0,0)都能塞进去 - 移动端（iOS/Android）：多数仅支持色盘，无键盘输入入口
用 <input type="text"> + 正则校验做 fallback 最可靠
放弃依赖 type="color" 的“完整性”，改用文本框主动控制输入逻辑，配合实时校验和视觉反馈，体验反而更可控。
- 校验正则推荐：
/^#([0-9A-F]{3}|[0-9A-F]{6}|[0-9A-F]{8})$/i（支持 #rgb、#rrggbb、#rrggbbaa） - 输入时自动补全：
#开头缺失时可自动前置，abc→#abc；长度为 3 或 6 时再触发校验 - 绑定
input事件而非change，确保粘贴、删除、组合键等操作都能即时响应 - 校验失败时保留用户输入（不重置），仅标红边框 + 提示，避免打断操作流
<input type="text" id="color-input" placeholder="#rrggbb" value="#336699"><div id="color-preview" style="width:24px;height:24px;border:1px solid #ccc;background:#336699"></div>
同步更新预览色块和原生 color input（如果存在）
若页面同时保留了 <input type="color">（例如用于桌面端快捷选色），需双向同步值，否则会出现 UI 不一致。
- 文本框变更 → 同步
colorInput.value = normalizedHex（注意：浏览器会把#abc转成#aabbcc） -
colorInput变更 → 用input事件捕获，更新文本框的value和预览色块 - 关键陷阱：Safari 下
type="color"的input事件不触发，只能监听change，且首次加载时value可能为空字符串，需 fallback 到文本框初始值 - 预览色块建议用
<div> 而非 <code><input>的伪元素，避免 CSS 兼容性问题hex 输入的大小写、空格、前导零处理要明确
用户输入习惯差异大：
#FF0000、#ff0000、#ff0000（带空格）、ff0000（缺 #）都可能出现。统一处理逻辑比放任更安全。- 一律转小写存储和展示（
value.toLowerCase()），避免大小写混用导致 CSS 匹配失败 - 去除首尾空格：
value.trim()，但不要在输入中自动删中间空格（如防止误删#f f0000这种异常输入） - 3 位 hex 自动扩展为 6 位：
#abc→#aabbcc，方便后续计算或传给 Canvas API - 不自动补全前导零（如
#f00不变#f00），但校验时接受它 —— 这是合法 CSS 颜色值
rgb(255, 0, 0)后要不要转 hex —— 这些边界情况没标准答案，只能按项目实际锁死规则。 - 一律转小写存储和展示（
