Question

我正在创建一个简单的HTML编辑器，用户可以在其中编辑预制的html块。

其中一个块具有默认背景颜色，我使用Spectrum为用户提供更改它的机会。

由于已经有默认背景（由css给出），我需要光谱返回＆＃34;背景颜色：透明＆＃34;如果选择为空，则默认将被覆盖，但是频谱返回空字符串（？）。

有没有办法返回＆＃34;背景颜色：透明＆＃34; ？

这是我目前的设置：

$('input[data-toggle="colorpicker"]').spectrum({

    showInput: true,
    allowEmpty: true,
    showButtons: true,
    clickoutFiresChange: true,
    preferredFormat: "name"

});

Answer 1

$("#colorpicker").spectrum({
                color: "white",
                showInput: true,
                className: "full-spectrum",
                showInitial: true,
                showPalette: true,
                showSelectionPalette: true,
                maxSelectionSize: 10,
                preferredFormat: "hex",
                localStorageKey: "spectrum.demo",
                clickoutFiresChange: true,
                palette: [["transparent"]], 
change: function(color) {
if(color._originalInput.a === 0) {
         color  = "transparent";
}else {color = color.toHexString();}
    $(this).val(color );
}

这是我的解决方案，用于检查所选颜色是否透明。由于我们无法将透明值转换为hexstring，因此我们需要手动检查透明值为字符串。

Answer 2

尝试使用更改事件....

$('input[data-toggle="colorpicker"]').spectrum({
    showInput: true,
    allowEmpty: true,
    showButtons: true,
    clickoutFiresChange: true,
    preferredFormat: "name",
    change: function(color) {
       if(color==''){
         // do something here
       }
   }
});

Answer 3

这是我的解决方案：

$(".colorpicker").spectrum({
    showInput: true, 
    showPalette: true, 
    preferredFormat: "hex6",
    showButtons: false,
    clickoutFiresChange: true,
    palette: [["transparent"]],
    change: function(color) {
        if(color.alpha===0) 
            color = "transparent";
        else color = color.toHexString();
        $(this).val(color);
    }
});

Spectrum Colorpicker无法返回“background-color：transparent”

3 个答案: