直接监听 input 事件即可实时获取并应用颜色值，event.target.value 返回标准7位小写十六进制字符串（如"#ff0000"），兼容现代浏览器，初始值为"#000000"，非法输入自动忽略。
直接监听 input 事件即可获取并实时应用用户选择的颜色值，无需等待失去焦点（change 事件太晚）。
监听 input 事件实时读取颜色值
type="color" 元素在用户拖动色盘或输入时会持续触发 input 事件，此时 event.target.value 就是当前选中的十六进制颜色字符串（如 "#ff0000"），格式固定为 7 位小写（#rrggbb）。
示例代码：
<input type="color" id="colorPicker" value="#3498db">
<div id="preview" style="width:200px; height:100px; border:1px solid #ccc;"></div>
<p><script>
const picker = document.getElementById('colorPicker');
const preview = document.getElementById('preview');</p><p>picker.addEventListener('input', (e) => {
const color = e.target.value;
preview.style.backgroundColor = color;
});
</script></p>兼容性与默认值注意事项
该控件在现代浏览器中支持良好（Chrome 25+、Firefox 27+、Safari 12.1+、Edge 79+），但不支持 IE。若需降级，可配合 input[type="text"] 手动校验颜色值，或使用第三方色盘库。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
注意以下几点：
- 未设置
value属性时，初始值为"#000000"（黑色），不是透明或空值； - 用户手动输入非法颜色（如
"#xyz"）时，浏览器会自动忽略并保持上一个有效值，不会触发异常； - 移动端 Safari 对
input事件响应及时，但部分旧版 Android WebView 可能略有延迟，仍推荐用input而非change。
扩展：同步更新其他样式属性
除背景色外，还可将颜色值用于边框、文字、阴影等：
element.style.borderColor = color;element.style.color = color;element.style.boxShadow = `0 0 8px ${color}`;- 若需对比度适配文字色，可用简单亮度公式判断：
const [r, g, b] = color.match(/\w\w/g).map(x => parseInt(x, 16));const brightness = (r * 299 + g * 587 + b * 114) / 1000;element.style.color = brightness > 128 ? '#333' : '#fff';
避免常见误区
不要用 change 事件——它只在用户关闭颜色面板后触发，无法做到“拖动即变”；也不要尝试用 keydown 或 blur，它们对色盘交互无效。
如果需要存储或提交颜色值，确保后端接收的是标准 7 位小写十六进制格式（前端拿到的 value 已满足此要求，无需额外转换）。
