스펙트럼 Colorpicker가 "background-color : transparent"를 반환 할 수 없음

Question

사용자가 사전 제작 된 html 블록을 편집 할 수있는 간단한 HTML 편집기를 만들고 있습니다.

이 블록 중 하나에는 기본 배경색이 있으며 스펙트럼을 사용하여 사용자가 변경할 수 있습니다.

이미 CSS가 제공하는 기본 배경이 있기 때문에 빈을 선택하면 스펙트럼이 "background-color : transparent"를 반환하므로 기본값이 덮어 쓰여 지지만 빈 문자열 (?)이 반환됩니다. .

"background-color : transparent"를 반환 할 수있는 방법이 있습니까?

이 내 현재 설정은 다음과 같습니다

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

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); 
} 

이는 다음과 같습니다

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

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

}); 

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

입니다 색상 선택 여부를 확인하는 내 솔루션 에드는 투명하거나 그렇지 않다. 투명한 값을 hexstring으로 변환 할 수 없으므로 transparent를 문자열로 수동 검사해야합니다.