javascript - 如果从颜色类型输入回退，如何设置光谱 js 的选项？

Question

我正在使用 Spectrum JS 作为不支持 <input type="color> 的浏览器的后备方案.为此，只需包含 Spectrum JS 库，一切都会自动完成。

http://bgrins.github.io/spectrum/#modes-input

一个工作示例: http://jsfiddle.net/ctkY3/5542/

除非使用 IE，否则您应该会看到默认的颜色输入框。 (是的，连IE11都不支持颜色输入，MS只支持Edge的颜色输入)

问题是一旦使用 $(element).spectrum()功能，它将显示所有浏览器的光谱颜色选择器，而我只是想将它用作后备。那么，如何向后备颜色选择器添加选项？

Answer 1

在您的 jQuery 对象上调用 spectrum 之前，您应该检查 dom 是否准备就绪以及浏览器是否支持颜色输入。

正如this answer显示，当不支持输入时，它将默认为文本。

因此，假设您有一个 ID 为 picker 的输入，您可以尝试以下操作:

$(document).ready(function() {
    var i, colorInputSupported;
    i = document.createElement("input");
    i.setAttribute("type", "color");
    colorInputSupported = i.type !== "text";

    if(!colorInputSupported){
      $("#picker").spectrum({
        // Here you put the options
        color: "#f00"
      });
    }
});

这是一个working example这段代码。

作为替代方案，spectrum 支持通过 data 属性在 HTML 元素中设置选择器的选项。例如:

<input type='color' id="picker" data-color="#f00"/>

将生成一个以红色开头的颜色选择器，仅在不支持默认颜色选择器的浏览器中显示。

这是一个working example .有关选项的完整列表，您可以在 spectrums docs 中查看它们