javascript - 如何在spectrum js输入框中附加多个颜色值？

Question

默认情况下，如果我们选择一种颜色，它显示的是输入框中的颜色代码，如果我们选择下一个，它会覆盖最后选择的颜色值。但我想用逗号分隔符附加所有选定的颜色值。像这样#7623131、#252525、#369855。我很困惑是否必须覆盖插件函数或必须编写任何其他用户定义的函数。

<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/

Answer 1

• 使用input事件
• 使用Array#join将 items 与 delimeter 连接起来
• 使用Array#indexOf检查数组中是否存在新颜色

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">