input[type="color"]的value必须为小写#rrggbb六位格式，否则静默变黑；需用正则标准化颜色值、监听input事件实现实时响应，并手动检测兼容性后降级。
value 必须是 #rrggbb 小写 6 位格式，否则静默变黑
浏览器对 input[type="color"] 的 value 格式极其敏感。传入 "#abc"、"red"、"rgb(255,0,0)" 或带 alpha 的 "#ff000080"，都会被静默重置为 "#000000"，页面上看起来就像“没反应”。
初始化时必须显式写全：<input type="color" value="#ff6b35">；不写 value 属性，部分浏览器仍 fallback 到 "#000000"，但不可靠。
服务端或 localStorage 返回的颜色值，务必提前标准化：
- 用正则
/^#?([a-f\d])([a-f\d])([a-f\d])$/i检测并补全缩写（如#abc→#aabbcc） - 统一转小写、去掉空格
- 校验是否匹配
/^#[0-9a-f]{6}$/i，否则 fallback 到默认色
必须监听 input 事件，change 无法实时响应
用户拖拽滑块、点击色环时，change 事件不会触发——它只在用户点“确定”或输入框失焦后执行一次。要实现背景色随拖动实时变化，唯一可靠的是 input 事件。
不同浏览器行为略有差异：
- Chrome / Firefox：每次拖动/点击都持续触发
- Safari 15.4+：仅在鼠标释放后触发一次，但仍比
change及时得多 - Vue / React 中仅靠
v-model或受控value不行，它们底层仍依赖原生事件，需手动绑定input
示例代码片段：
const colorInput = document.querySelector('input[type="color"]');
colorInput.addEventListener('input', () => {
document.body.style.backgroundColor = colorInput.value;
});
兼容性检测和降级必须手动做，浏览器不会自动兜底
input[type="color"] 在 IE 全系、Safari ≤14.0、iOS Safari ≤15.3 中完全不识别，渲染为空白或普通文本框，且不触发任何事件。CSS 隐藏或样式 hack 无效。
检测是否真正可用：
const isColorSupported = document.createElement('input').type === 'color';
若为 false，必须降级：
- 不能简单改
type="text"，而应加一层颜色校验逻辑 - 在
input事件中用正则匹配颜色值，并同步更新预览色块（如div.style.backgroundColor = value） - iOS Safari 15.4+ 虽支持，但默认点击热区极小，建议用
<label></label>包裹或加padding扩大可点击区域
别指望 CSS 自定义弹窗，系统级 UI 完全不可控
你只能控制预览小方块的样式（比如边框、尺寸），但弹出的颜色选择器本身是操作系统级组件：无法改布局、不能加历史色板、不能开透明度滑块、不能换语言、不能禁用 alpha 输入（即使它会被忽略）。
如果项目需要透明度、HSL 输入、取色器、吸管工具或色板历史，input[type="color"] 就不是解法——得上 Canvas + 自研调色器，或引入成熟库如 react-colorful 或 vanilla-picker。
原生控件的优势在于轻量、无障碍友好、系统一致；它的代价就是零定制权。想两全，就得接受“一半原生、一半手写”的混合方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
