jquery - 无法在 bootstrap colorpicker 中设置 rgba 值

Question

我正在使用 Bootstrap 颜色选择器(请参阅 https://itsjavi.com/bootstrap-colorpicker )，它工作得很好，除了一件事:让 jQuery 将值更改为包含透明度的值。

我做了一个 jsfiddle 来重现问题 http://jsfiddle.net/gwonha3L :

HTML:

<div class="main">
  <div class="color input-group colorpicker-component">
    <input type="text" class="form-control" />
    <span class="input-group-addon"><i></i></span>
  </div>

  <input id="updatecolorbtn" type="button" value="Set color to rgba(255,0,0,0.5)" class="form-control" />

  <div id="colordiv" style="width: 100px; height: 100px; background-color: lightblue;"></div>
</div>

Javascript:

$(function() {
  $('.color').colorpicker().on('changeColor', function(ev) {
    $('#colordiv').css('background-color', $('.color').colorpicker('getValue'));
  });
});

$("#updatecolorbtn").click(function() {
  $('.color').colorpicker('setValue', 'rgba(255,0,0,0.5)');
});

您可能期望单击该按钮会将颜色更改为透明度为 50% 的红色，但实际上它只是红色 (#ff0000)。如果我使用颜色选择器本身，透明度就很好。

我做错了什么吗？

Answer 1

您需要插入格式rgba

$(function() {
  $('.color').colorpicker({format: 'rgba'}).on('changeColor', function(ev) {
    $('#colordiv').css('background-color', $('.color').colorpicker('getValue'));
  });
});

$("#updatecolorbtn").click(function() {
  $('.color').colorpicker('setValue', 'rgba(255,0,0,0.5)');
});

http://jsfiddle.net/gwonha3L/1/