H5 中 input type="color" 怎么获取并实时应用用户选择的颜色值-H5教程-PHP中文网

直接监听 input 事件即可实时获取并应用颜色值，event.target.value 返回标准7位小写十六进制字符串（如"#ff0000"），兼容现代浏览器，初始值为"#000000"，非法输入自动忽略。

$h5 中 input type=\$

直接监听 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');</script></p><p>picker.addEventListener('input', (e) => {
const color = e.target.value;
preview.style.backgroundColor = color;
});
</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';