Bootstrap 颜色选择器初始颜色值答案

【问题标题】：Bootstrap colorpicker initial color valueBootstrap 颜色选择器初始颜色值
【发布时间】：2015-07-29 10:57:36
【问题描述】：

我正在使用引导颜色选择器，但我的要求是在更改选择下拉列表时以不同方式更改默认的加载颜色。

我正在使用以下构造函数：-

$('#colorPicker').colorpicker();

这是jsp中的代码

<div id='colorPicker'>
 <input type='text' value='#ea0437' class='form-control'/>
 <span class='input-group-addon'></span>
</div>

我正在从数据库中获取颜色代码，因此我无法在以下行中添加上面给出的初始颜色代码：

<input type='text' value='#ea0437' class='form-control'/>

如何在构造函数中提供这种颜色？文档说有一个颜色选项，但没有给出演示。最初如何提供颜色？像这样：

$('#colorPicker').colorpicker({
color : '#ea0437'
})

有什么建议吗？提前致谢。

【问题讨论】：

你使用这个网站的颜色选择器吗：mjolnic.com/bootstrap-colorpicker
你试过颜色属性吗？你有错误吗？
为什么不用颜色输入类型呢？像这样：<input type="color" name="favcolor" value="#ea0437">
@ReaganGallant 是的，我正在使用你提到的那个。
@sjm 是的，我使用了问题中给出的颜色属性。它不工作。控制台没有错误。它只是忽略颜色并将颜色选择器组件加载到默认空白状态，并带有一个不可见的框（透明无颜色）。单击该按钮后，我打开了颜色选择器小部件，然后可以选择颜色。但是没有满足加载具有初始颜色的颜色选择器的要求。请提出建议。

【解决方案1】：

经过几天的尝试，我开始工作了。似乎 onchange 事件已附加到颜色选择器输入字段，但在通过脚本设置值后不会被触发。因此你必须手动触发它，像这样：

$("#inputcolor").val("#bbccff");
$("#inputcolor").trigger('change');

【讨论】：

【解决方案2】：

同时使用这两种方法。它会工作

$('#inputcolor').colorpicker({color : "Your_color"})
$('#inputcolor').colorpicker('setValue', "Your_color")

【讨论】：

【解决方案3】：

这段代码对我有用：

$('#colorPicker').colorpicker(document.getElementById('inputcolor'),'#ea0437');

我只是给输入“inputcolor”的id，然后用getElementById获取它。

编辑：

当文档完全加载时，如何为输入分配一个值，然后颜色选择器选择它，所以它就像一个默认颜色。

这是新代码：

$(document).ready(function(){
    $('#inputcolor').val('#ccc');
});
    $('#colorPicker').colorpicker();

这个库有很多问题，你可以在他们的github 中查看问题。

这是新的Fiddle

【讨论】：

感谢 ayadi 的努力，但小提琴没有按预期工作。您在和颜色选择器构造函数中提供了相同的颜色代码 '#ea0437'。我试图改变颜色然后运行它失败了。
我刚刚做了一些编辑，你能确认这是否是你要找的吗？谢谢
非常感谢 ayadi baha。是的，它现在起作用了。我正在尝试与您相同的方法“ $('#inputcolor').val('#832ed9');”但我是通过java脚本而不是jquery来做到这一点的。不知道为什么它不起作用。昨天我通过对 bootstrap colorpicker js 文件进行一些修改来解决它。您以非常简单的方式解决了它，而无需触及 colorpicker 的源 js 文件。非常感谢您的帮助:)

【解决方案4】：

根据文档

$colorpicker.colorpicker('setValue', value);

用十六进制试过，似乎工作正常

【讨论】：

【解决方案5】：

我用过：

$('#inputcolor').val('#ccc');
$('#colorPicker div').css('backgroundColor', '#ccc');

祝你好运

【讨论】：