Spectrum Color-Picker not working in Internet Explorer

Question

I'm using Spectrum Color picker in a javascript project I'm working on. https://bgrins.github.io/spectrum/ It works fine in FireFox, but not in Internet Explorer. The fancy color picker popup degrades to a simple text input field. Here is the section of code that creates the input field:

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>");
}

}

And then I have these two lines in my HTML file:

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

The documentation says the input will degrade to a text input if javascript isn't working, but I know that can't be the issue sense the rest of the project works fine. Any help is greatly appreciated!

Answer 1

Oh hi!

So firstly, the spectrum documentation was a bit confusing about this so it took me a while to find, but the answer is actually really, really dumb once you find it:

You're not using spectrum.

So, firstly, the documentation says:

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

So, this is what we were trying to do, without realizing we weren't really using spectrum. Instead, we were using the HTML 5 color input type spec, which isn't supported by IE (See color input type support)

So, to enable spectrum, we actually need to make a call to the spectrum library, and then it works:

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