Spectrum Colorpicker unable to return "background-color: transparent"

Question

I'm creating a simple HTML editor where users have the chance to edit pre-made html blocks.

One of this blocks has a default background color and I'm using Spectrum to give users the chance to change it.

Since there's already a default background (given by css), I need spectrum to return "background-color: transparent" when empty is selected, so the default will be overwritten, however spectrum is returning an empty string (?).

Is there a way to return "background-color: transparent" ?

This are my current settings:

$('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 );
}

This is my solution which worked to check whether color selected is transparent or not. Since we can not convert the transparent value to hexstring , we need to manually check for transparent as string .

Answer 2

Try using the change event....

$('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

This is my solution :

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