Javascript 使用颜色选择器使用 jquery 更改颜色？

changing colors with jquery with a color picker?

提问by getaway

i have this jquery script that changes the color of the background instantly by entering a color code into the textbox, the working example is in jsfiddle link below.

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

http://jsfiddle.net/7jg4e/

http://jsfiddle.net/7jg4e/

but instead of the input field i wanted to use a color picker custom skin, becuase i dont want user to deal with hex code(just like twitter). the jquery plugin im trying to use is found at

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

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

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

at the buttom of the page it has the neat color picker with DOM element.

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

so the problem is how am i going to change from the input type to the color picker div. thanks :))

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

采纳答案by Fermin

Replace the input element with a div use something like: (untested!)

用 div 替换输入元素，使用如下内容：（未经测试！）

HTML

HTML

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

JS

JS

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

There's an example at the bottom of the link you have which shows you how.

您拥有的链接底部有一个示例，向您展示了如何操作。

Update for changing text

更新更改文本

HTML

HTML

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

JS

JS

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

回答by gmo

Just as further reference... HTML5 already include "color" as an Input type.

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

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

Plus, you can apply some css style with:

另外，您可以应用一些 css 样式：

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

Now, for the main question... you can capture the color value to change the bg-color with a simple script. Live example: http://jsfiddle.net/7jg4e/152/

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

回答by Nathan MacInnes

How about:

怎么样：

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

回答by palak

Thanks keithics..

谢谢凯西斯..

I had the similar problem. I had to call colorpicker for dynamic buttons. I did with taking class instead of id.

我有类似的问题。我不得不为动态按钮调用颜色选择器。我做了上课而不是身。

It helped me a lot.

这对我帮助很大。

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

回答by Avinash

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

回答by keithics

I have the same problem and below is my solution.

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

edit colorpicker.js line 96

编辑 colorpicker.js 第 96 行

from

从

cal.data('colorpicker').onChange.apply(cal, [col, HSBToHex(col), HSBToRGB(col)]);

cal.data('colorpicker').onChange.apply(cal, [col, HSBToHex(col), HSBToRGB(col)]);

to

到

cal.data('colorpicker').onChange.apply(cal, [col, HSBToHex(col), HSBToRGB(col), cal.data('colorpicker').el]);

cal.data('colorpicker').onChange.apply(cal, [col, HSBToHex(col), HSBToRGB(col), cal.data('colorpicker').el]);

on change event instead of onChange: function (hsb, hex, rgb) ...

on change 事件而不是 onChange: function (hsb, hex, rgb) ...

to

到

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

onChange: 函数 (hsb, hex, rgb,el) {
$(el).val('#' + hex);
}