Spectrum.js 将颜色选择器重置为“空白”答案

【问题标题】：Spectrum.js reset the color picker to "blank"Spectrum.js 将颜色选择器重置为“空白”
【发布时间】：2017-07-19 01:21:27
【问题描述】：

我使用spectrum.js 作为颜色选择器，我非常喜欢它。有两件事我不知道该怎么做。我的配置如下：

$("#myColorThing").spectrum({
    preferredFormat: "rgb",
    showPaletteOnly: true,
    showPalette: true,
    hideAfterPaletteSelect: true,
    color: "",
    showInput: true,
    allowEmpty: true,
    palette: [
        [
            "rgb(000,000,128)",
            "rgb(000,000,255)",
            "rgb(000,128,000)",
            "rgb(000,128,128)",
            "rgb(000,128,255)"
        ],
        [...],...
    ]
});

我的问题是：

我只使用palette 选项，我的有5 行5 列颜色。渲染的小部件看起来有点像带有“透明”/方格图像的下拉菜单，表示没有选择。美好的。如果我激活小部件并选择一种颜色，有没有办法重新开始？将小部件设置回无选择状态？
与#1 相关。是否可以在palette 中将该“透明”/方格图像作为“颜色”选项，以便选择它会清除支持输入字段的值？

【问题讨论】：

标签： javascript spectrumjs

【解决方案1】：

我找到了问题 1 的解决方法。我重新编写了我的代码。我创建了spectrum 小部件附加到的基本html input 元素。然后我添加了一个button，其onClick 操作执行...spectrum("destroy")，然后重新创建频谱实例。啦啦：

基础html：

<div id='colorDiv' class='form-group'>
     <label for='myColorThing'>Event Color</label>
     <input type='text' name='myColorThing' id='myColorThing'>
     <button id='defaultColor' class='btn btn-sm btn-default'>Default Color</button>
</div>

执行重置魔法的 js 例程：

$("#defaultColor").on("click", function () {
    resetColorPicker();
});

function resetColorPicker() { 
    $("#myColorThing").spectrum("destroy");
    $("#myColorThing").val("");

    $("#myColorThing").spectrum({
        preferredFormat: "rgb",
        showPaletteOnly: true,
        showPalette: true,
        hideAfterPaletteSelect: true,
        color: "",
        showInput: true,
        allowEmpty: true,
        palette: [
            [
                "rgb(000,000,128)",
                "rgb(000,000,255)",
                "rgb(000,128,000)",
                "rgb(000,128,128)",
                "rgb(000,128,255)"
            ],
            [...],...
        ]
    });
}

【讨论】：