HTML5 输入类型颜色在通过 js 创建时不显示值

HTML5 input type color doesn't show value when created via js

本文关键字：创建 显示 js 类型 输入 颜色 HTML5      更新时间：2023-09-26

我正在通过javascript创建一个表，其中一列将包含一个html颜色选择器。我遇到的问题是在Chrome中设置了默认值，但颜色选择器上显示的颜色是黑色。

这是我正在使用的JavaScript

c = r.insertCell(1);
c.setAttribute('class','second');
inp=document.createElement("input"); 
inp.setAttribute('type','color');
inp.setAttribute('id','colo_'+i);
inp.setAttribute('value','#ffffff');
inp.setAttribute('class','datafield');
inp.addEventListener('change', saveFields);
c.appendChild(inp);

这是从 if 生成的 html


<输入类型 id="colo_0" 值="#8080ff" 类="数据字段">

这是一个错误还是我做错了什么？

有趣。我能够复制您的结果(示例(。

与其使用 setAttribute ，不如直接设置value：

inp.value = '#ffffff';

显然，这让Chrome感到高兴。(实时副本 |来源(

旁注：您通过setAttribute设置的所有内容都具有可以使用的反射属性：

inp = document.createElement("input"); 
inp.type = 'color';
inp.id = 'colo_'+i;
inp.value = '#ffffff';
inp.className = 'datafield';

请注意，最后一个是className而不是class。

更新示例 |源

有一天它可能会对某人有所帮助，所以我就把它放在这里：输入颜色的值似乎仅适用于十六进制值(而不是 RGB( - 因此，如果您的颜色为 RGB - 请先将其切换为十六进制。RGB 到十六进制

相关文章：