Question

我通过添加bootstrap-colorpicker.css和js来使用bootstrap colorpicker，如下所示： -

<div class="demo-auto">
<input type="text" value="#ea0437"class="form-control" hidded='hidden' id="irColorCode"/>
<span class="input-group-addon"><i></i></span>
</div>

我通过给它一个id来隐藏文本框。现在我的要求是每次用户更改颜色时触发方法。文本框被隐藏，因此我无法使用onchange方法。

我正在使用.watch方法，但它将oldValue作为＆＃34; undefined＆＃34;。

document.getElementById('irColorCode').watch('value',
        function(id, oldval, newval) {
            console.log(id+ " " + oldval +" " + newval);
        });

还有其他方法可以解决这个问题吗？有一种方法可以对颜色变化采取行动： -

$('.my-colorpicker').colorpicker().on('changeColor.colorpicker', function(event){
  bodyStyle.backgroundColor = event.color.toHex();
});

但我没有在任何地方使用这个构造函数。请建议如何使用它？

Answer 1

我自己整理了一下。在docs.js中写了上面给出的方法，如下所示：

$('#myColorPicker').colorpicker().on('changeColor',
            function(ev) {
                changeTableColor('myColorCode');
            });

我不是手动调用这个构造函数，而是在docs.js中使用id $（'＃myColorPicker'）硬编码。傻但这就是问题，所以我用我的id复制了这里的代码，并在'changecolor'事件上调用了我的方法。

谢谢：）

Answer 2

带有颜色框的颜色选择器输入：

<div>
   <input type="text" class="color-picker-input" >
   <span class="color"></span>
</div>

稍后在你的js：

$('.color-picker-input').colorpicker().on('changeColor', function() {
      $(this).parent().find('.color').css("background-color", $(this).colorpicker('getValue', '#ffffff') );
});

如何调用＆＃39; changeColor＆＃39; bootstrap colorpicker的方法？

2 个答案: