使用顏色選擇器使用 jquery 更改顏色？

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-color。 現場示例： 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

謝謝凱西斯..

我有類似的問題。 我不得不為動態按鈕調用顏色選擇器。 我做了上課而不是身份證。

這對我幫助很大。

$('.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 事件而不是 onChange: function (hsb, hex, rgb) ...

到

onChange: 函數 (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