Spectrum Color-Picker 在 Internet Explorer 中不工作

Spectrum Color-Picker not working in Internet Explorer

我在我正在处理的 javascript 项目中使用 Spectrum 颜色选择器。 https://bgrins.github.io/spectrum/ 它在 FireFox 中运行良好,但在 Internet Explorer 中运行不正常。花哨的颜色选择器弹出窗口降级为简单的文本输入字段。这是创建输入字段的代码部分:

function updateTables() {
$("#tableTwo tbody").empty();
for (var i = 0; i < polygons.length; i++) {
    //var pColor = new RGBColor();
    var pColor = rgbaToHex(polygons[i].color);
    $("#tableTwo tbody").append('\n<tr '
                                + (selectedPoly == i ? 'style="color:white;background-color:red"' : '')
                                + '><td><input onchange="changeGeometryName(' + i + ')"'
                                + (selectedPoly != i ? 'onfocus="polySelectedFromTable(' + i + ')"' : '') + 'type="text" size="11" '
                                + 'id="polygonName' + i + 'Input"  value="' + polygons[i].name + '" /></td>' + "<td><input type='color'"
                                + ' onchange="setColor(' + i + ')" id="color' + i + '" value="' + pColor + '"/></td>' + "</tr>");
}

}

然后我的 HTML 文件中有这两行:

<script src='spectrum.js'></script>
<link rel='stylesheet' href='spectrum.css' />

文档说如果 javascript 不工作,输入将降级为文本输入,但我知道这不是问题,因为项目的其余部分工作正常。非常感谢任何帮助!

哦嗨!

所以首先,频谱文档对此有点混乱,所以我花了一段时间才找到,但一旦你找到它,答案实际上是非常非常愚蠢的:

您没有使用频谱。

因此,首先,文档说:

If you just want to provide a polyfill for the native color input, the easiest way is to create an input with the type of color. Once a user's browser supports a native color control, it will opt to use their native control instead. Spectrum Docs

所以,这就是我们试图做的,但没有意识到我们并没有真正使用频谱。相反,我们使用的是 HTML 5 色输入类型规范,IE 不支持该规范(参见 color input type support

所以,要启用频谱,我们实际上需要调用频谱库,然后它就可以工作了:

$('#color' + id).spectrum({ color: pColor(, other-parameters-here)});