input type="color" 的 value 必须是形如 "#rrggbb" 的7位小写十六进制字符串，浏览器强制校验；非法格式（如"#f00"、"red"、"#ff000080"）会静默回退至"#000000"；动态赋值须用.value而非.setattribute；safari兼容性差，需校验格式并监听input事件。
input type="color" 的 value 必须是 7 位小写十六进制字符串
不是“能用就行”，而是浏览器强制校验：只有形如 "#rrggbb"（7 字符，含 #，全小写）的值才被接受。写成 "#FF0000"、"#f00"、"red"、"rgb(255,0,0)" 或 "#ff000080" 都会静默失败，回退到 "#000000"。
常见错误现象：页面加载后颜色选择器显示黑色，但你明明写了 value="white" 或 value="#fff" —— 这是因为这些都不是合法格式。
-
"#ffffff"✅ 合法（7 位、带 #、小写） -
"#FFF"❌ Safari 旧版不识别，Chrome/Firefox 也已逐步弃用缩写支持 -
"#00000080"❌ 多一位（alpha），直接丢弃并重置为黑 -
"000000"❌ 缺少 #，等同于空值
动态设置 color input 的默认值必须用 .value = 赋值，不能用 setAttribute
JS 修改时，el.setAttribute('value', '#3a86ff') 不会更新控件显示或内部状态；必须用 el.value = '#3a86ff'。否则用户看到的还是旧颜色，且 el.value 读出来仍是旧值。
尤其在 Vue/React 等框架中绑定 v-model 或受控组件时，若底层用了 setAttribute（比如某些封装库误用），会导致初始渲染正确但后续更新失效。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- ✅ 正确：
document.getElementById('picker').value = '#3a86ff' - ❌ 无效：
document.getElementById('picker').setAttribute('value', '#3a86ff') - ⚠️ 注意：赋值后需确保字符串已标准化（如后端返回 rgb 格式，前端必须先转成
"#rrggbb"）
Safari 和 iOS 上的兼容性陷阱
iOS Safari 15.4+ 才真正支持 input[type="color"]，且对 CSS 干扰极度敏感：appearance: none、background、border 等样式可能让控件完全不可点击或不渲染。Safari 也不支持 ::-webkit-color-swatch 以外的伪元素定制。
更隐蔽的问题是：Safari 对非法 value 的处理比 Chrome 更“安静”——不报错、不警告，只显示空白或黑块，调试时容易误判为 JS 逻辑问题。
- 建议在初始化前做一次格式校验：
/^#[0-9a-f]{6}$/i.test(colorStr)，不匹配就 fallback 到"#000000" - 避免在 Safari 中尝试隐藏原生 swatch 并用自定义按钮触发 click —— iOS 下
click()可能被拦截 - 服务端返回颜色字段时，务必提前转成小写 7 位格式（例如 Python 用
color.lower().zfill(7)，JS 用color.toLowerCase().padStart(7, '#')）
监听颜色变化该用 input 还是 change？
答案是：两个都得监听，但优先靠 input。Chrome/Firefox 在拖拽色盘时持续触发 input，而 change 只在鼠标松开后触发一次；Safari 却常不触发 change，只认 input。
这意味着：仅绑 change 会导致 Safari 用户拖着滑块调色却没反应，体验断裂。
- ✅ 推荐写法：
el.addEventListener('input', handler) - ✅ 补充写法：
el.addEventListener('change', handler)（兼容旧逻辑或表单提交场景） - ⚠️ 注意：
input事件的event.target.value始终是标准"#rrggbb"格式，无需二次解析
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
