如何在“光谱颜色选择器”中显示颜色的值？

Question

我可以很好地实现Spectrum的颜色选择器

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/bgrins/spectrum/master/spectrum.js"></script>
<link href="https://cdn.rawgit.com/bgrins/spectrum/master/spectrum.css" rel="stylesheet"/>

<input type='color' name="{{ name }}" value="{{ value }}" />

我的问题是我想显示颜色的值，因为在w管理中，请使用颜色代码更改文本的颜色。

但是我不知道如何使用JavaScript在charfield中获取值。有人可以帮我吗？

谢谢。

Answer 1

这里是如何在HTML上获得颜色。

您需要使用库的方法来从中检索颜色。

$(".color").spectrum({
  color: "#f00", // sets by default color
  change: function(color) { 
    $("#basic-log").text("change called: " + color.toHexString());
  }
});

希望这会有所帮助！

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/bgrins/spectrum/master/spectrum.js"></script>
<link href="https://cdn.rawgit.com/bgrins/spectrum/master/spectrum.css" rel="stylesheet"/>

<input class="color" type='color' name="{{ name }}" value="{{ value }}" />

<em id='basic-log'></em>