Chromium 107起input[type=color]预定义值选择后值异常问题

问题本质 #

你遇到的不是代码操作错误，而是Chromium 107及后续版本引入的bug——当<input type="color">关联<datalist>时，选择预定义颜色选项会错误地将输入值设置为无效的rgba(0, 0, 0, 0)，而Chromium 106及更早版本无此问题。

临时修复方案 #

可以通过监听输入框的input事件，手动修正错误值为选中的预定义颜色，示例代码如下：

<datalist id="5sui88f">
  <option value="#1973ff">#1973ff</option>
  <option value="#7F23FF">#7F23FF</option>
  <option value="#ff4136">#ff4136</option>
  <option value="#ff851b">#ff851b</option>
  <option value="#ffeb10">#ffeb10</option>
  <option value="#00db60">#00db60</option>
</datalist>

<input type="color" list="5sui88f" id="picker">

<script>
const picker = document.getElementById('picker');
picker.addEventListener('input', (e) => {
  // 检测到无效的透明值时，从datalist中匹配对应选项
  if (e.target.value === 'rgba(0, 0, 0, 0)') {
    const datalist = document.getElementById('5sui88f');
    const selectedOption = Array.from(datalist.options).find(opt => opt.textContent === e.target.valueAsText);
    if (selectedOption) {
      e.target.value = selectedOption.value;
    }
  }
});
</script>

修复说明：

• 给<option>显式添加value属性，避免浏览器解析歧义
• 通过input事件捕获错误值，匹配datalist中的对应选项并手动设置正确颜色值

后续建议 #

该bug已被Chromium官方记录，可关注Chromium的bug追踪系统获取修复进度，当前优先使用上述临时方案维持功能正常。

内容的提问来源于stack exchange，提问作者kolaente