实时改背景色需三点：值格式必须为小写#rrggbb六位，监听input事件（非change），并手动兜底兼容性；不支持时用正则校验颜色值并降级。
用 input[type="color"] 实时改背景色，关键不在“有没有颜色框”，而在于三点：值格式必须严格、事件必须用 input、兼容性必须手动兜底。
颜色值必须是小写 #rrggbb 六位格式
浏览器对 value 极其挑剔。传入 #abc、red、rgb(255,0,0) 或带透明度的 #ff000080，都会静默变成 #000000——看起来像没反应。
- 初始化时显式写全：
- 从 localStorage 或接口拿到的颜色，要先标准化：
匹配/^#?([a-f\d])([a-f\d])([a-f\d])$/i补全缩写（如#abc→#aabbcc）
转小写、去空格，再校验是否符合/^#[0-9a-f]{6}$/i，否则 fallback 到默认色
必须监听 input 事件，不是 change
change 只在用户点“确定”或失焦后触发一次，拖拽滑块、点击色环时完全不响应。要实现“拖着就变”，唯一可靠的是 input 事件。
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
- Chrome / Firefox：每次拖动/点击都持续触发
- Safari 15.4+：鼠标释放后触发一次，仍比
change及时得多 - Vue / React 中仅靠
v-model或受控value不行，需手动绑定：colorInput.addEventListener('input', () => { document.body.style.backgroundColor = colorInput.value; })
兼容性检测和降级不能省
IE 全系、Safari ≤14.0、iOS Safari ≤15.3 完全不识别 type="color"，会渲染成空白或普通文本框，且不触发任何事件。
- 检测是否支持：
const isColorSupported = document.createElement('input').type === 'color'; - 不支持时不能简单改成
type="text"，必须加颜色校验逻辑：
在input事件中用正则匹配合法颜色值，再同步更新预览（如div.style.backgroundColor = value） - iOS Safari 15.4+ 虽支持，但默认点击热区极小，建议用
包裹或加padding扩大可点区域
别忘了 CSS 过渡让变化更自然
直接赋值 style.backgroundColor 会瞬切。加一句过渡更友好：
- CSS 中写：
body { background-color: #fff; transition: background-color 0.3s ease; } - 注意：初始背景色必须显式声明（不能留空），否则从 undefined 到新色无法过渡
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
