CODEWITHSUNDEEP
javascriptjqueryjquery-plugins
hardcode
hardcode

Reputation: 405

how to append multiple color values in spectrum js input box?

enter image description here

By default, if we choose one color it show is color code in input box, if we choose next it overwrite the last choosed color value. But I want to append all selected color values with comma separator. Like this #7623131,#252525,#369855. I confused whether I have to overwrite plugin function or have to write any other user defined function.

<h2>Basic Usage</h2>
<input type='text' class="basic"/>

$(".basic").spectrum({
color: "#f00",
showInput:true,
preferredFormat:'hex',
change: function(color) {
    $("#basic-log").text("change called: " + color.toHexString());
}
});

http://jsfiddle.net/ctkY3/5227/

Upvotes: 0

Views: 286

Answers (2)

Chamith Saranga
Chamith Saranga

Reputation: 40

$(()=>{
  $('#Color').on('change', function() { 
     $('#txtColor').val( $('#txtColor').val()+','+ $('#Color').val());
  });
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='color' id='Color' />
<input type='text'  id='txtColor'/>

Upvotes: 0

Rayon
Rayon

Reputation: 36599

var arr = [];
$('[type="color"]').on('input', function() {
  if (this.value && arr.indexOf(this.value) === -1) {
    arr.push(this.value);
    $('[type="text"]').val(arr.join(', '));
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input type="color">
<input type="text">

Upvotes: 1

Related Questions