实时改背景色需三点：值格式必须为小写#rrggbb六位，监听input事件（非change），并手动兜底兼容性；不支持时用正则校验颜色值并降级。

用 input[type="color"] 实时改背景色，关键不在“有没有颜色框”，而在于三点：值格式必须严格、事件必须用 input、兼容性必须手动兜底。

颜色值必须是小写 #rrggbb 六位格式

浏览器对 value 极其挑剔。传入 #abc、red、rgb(255,0,0) 或带透明度的 #ff000080，都会静默变成 #000000——看起来像没反应。

• 初始化时显式写全：<input type="color" value="#ff6b35">
• 从 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+ 虽支持，但默认点击热区极小，建议用 <label></label> 包裹或加 padding 扩大可点区域

别忘了 CSS 过渡让变化更自然

直接赋值 style.backgroundColor 会瞬切。加一句过渡更友好：

• CSS 中写：body { background-color: #fff; transition: background-color 0.3s ease; }
• 注意：初始背景色必须显式声明（不能留空），否则从 undefined 到新色无法过渡