Question

我有这个jquery脚本，通过在文本框中输入颜色代码立即改变背景的颜色，工作示例在下面的jsfiddle链接中。

http://jsfiddle.net/7jg4e/

但是我想使用颜色选择器自定义皮肤而不是输入字段，因为我不希望用户处理十六进制代码（就像twitter一样）。我试图使用的jquery插件可以在

找到

http://www.eyecon.ro/colorpicker/

在页面的底部，它有一个带有DOM元素的整洁颜色选择器。

所以问题是我将如何从输入类型更改为颜色选择器div。谢谢:)）

Answer 1

正如进一步参考...... HTML5已经将“颜色”包含为输入类型。

<label for="bg">Choose color:</label> 
<input id="bg" type="color" />

另外，您可以在以下位置应用一些css样式：

input[type="color"]{/*css-here*/}

现在，对于主要问题......您可以使用简单的脚本捕获颜色值以更改bg颜色。实例：http://jsfiddle.net/7jg4e/152/

Answer 2

使用div替换输入元素，例如:(未经测试！）

HTML

<div id='colourPicker'></div>

JS

$('#colourPicker').ColorPicker({
  onChange: function(hsb, hex, rgb){
    $("#full").css("background-color", '#' + hex);
  }
});

链接底部有一个示例，向您展示如何。

更新文字

HTML

<div id='colourPickerText'></div>
<div id='textToBeChanged'>Test text</div>

JS

$('#colourPickerText').ColorPicker({
  onChange: function(hsb, hex, rgb){
    $("#textToBeChanged").css("color", '#' + hex);
  }
});

Answer 3

怎么样：

$('#colorSelector').ColorPicker({
onChange: function(hsb, hex, rgb)
          {
            $("#full").css("background-color", hex);
          }
});

Answer 4

感谢keithics ..

我遇到了类似的问题。我不得不为动态按钮调用colorpicker。我做了上课而不是上课。

它给了我很多帮助。

$('.colorSelector').ColorPicker({
onChange: function(hsb, hex, rgb,el)
      {
        $(el).val('#' + hex);
      }
});

Answer 5

我有同样的问题，下面是我的解决方案。

编辑colorpicker.js第96行

来自

cal.data（'colorpicker'）。onChange.apply（cal，[col，HSBToHex（col）， HSBToRGB（COL）]）;

到

cal.data（'colorpicker'）。onChange.apply（cal，[col，HSBToHex（col）， HSBToRGB（col），cal.data（'colorpicker'）。el]）;

on change event而不是onChange：function（hsb，hex，rgb）...

到

onChange：function（hsb，hex，rgb，el）{
  $（el）.val（'＃'+ hex）;
  }

Answer 6





let drawingBuffer
      getColor(colorPicker) {
        let color = 'ColorPicker1';
        this.drawingBuffer = document.getElementsByClassName("colorSets");
         for (var i = 0; i < this.drawingBuffer.length; i++) {
             this.drawingBuffer[i].style.color = colorPicker;
         }
         this.drawingBuffer.style.color = colorPicker;
        return color;
    }
<div class="colorSets">test</div>
<div class="colorSets">test1</div>
<input name="MyColorPicker" id="ColorPicker1" [cpPresetLabel]="color" [(colorPicker)]="color" [style.background]="color" (colorPickerChange)="getColor($event)"/>


//this is not working in snipest but use as it code and then use npm install it will work for you

用颜色选择器用jquery改变颜色？

6 个答案: