Spectrum Colorpicker 无法返回“背景颜色：透明”

Posted 2023-02-25

【中文标题】Spectrum Colorpicker 无法返回“背景颜色：透明”

【英文标题】：Spectrum Colorpicker unable to return "background-color: transparent"

【发布时间】：2014-04-27 14:42:44

【问题描述】：

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

其中一个块具有默认背景颜色，我正在使用 Spectrum 让用户有机会更改它。

由于已经有一个默认背景（由 css 给出），我需要在选择空时光谱返回“背景颜色：透明”，因此默认值将被覆盖，但是光谱返回一个空字符串 (?)。

有没有办法返回“背景颜色：透明”？

这是我当前的设置：

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

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

);

【参考方案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 );

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

【参考方案2】：

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

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

【参考方案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);
    
);