如何使用颜色选择器作为 HTML 输入元素答案

【问题标题】：How to use color picker as HTML input element如何使用颜色选择器作为 HTML 输入元素
【发布时间】：2016-06-15 13:22:22
【问题描述】：

我想使用颜色选择器作为 html 输入元素来输入一些产品颜色。我使用了各种颜色选择器，但不能满足我的要求。但最后我找到了 Spectrum - 我的系统中没有麻烦的 jQuery Colorpicker。

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Spectrum - The No Hassle jQuery Colorpicker</title>

<meta name="description" content="Spectrum is a JavaScript colorpicker plugin using the jQuery framework.  It is highly customizable, but can also be used as a simple input type=color polyfill">
<meta name="author" content="Brian Grinstead and Spectrum contributors">

<link rel="stylesheet" type="text/css" href="spectrum.css">
<script type="text/javascript" src="docs/jquery-1.9.1.js"></script>
<script type="text/javascript" src="spectrum.js"></script>

</head>
<body>
<input type='color' name='color2' value='#3355cc' />

</body>
</html>

这也适用于 microsoft edge。但是当我单击添加按钮时，我想添加更多颜色选择。它仅适用于 crom。当我使用边缘时，我只显示文本框。我如何解决这个问题？

【问题讨论】：

标签： javascript php jquery html css

【解决方案1】：

您可以使用颜色选择器 JQuery 插件。这是最好的！

链接：http://www.eyecon.ro/colorpicker

【讨论】：

【解决方案2】：

Spectrum.js“The No Hassle jQuery Colorpicker”是最简单的，也是目前最好的颜色选择器之一。

开源

易于使用

许多内置颜色函数。

链接

http://bgrins.github.io/spectrum/#options-showInput

糟糕，我在阅读问题时犯了一个错误。

这是 IE 频谱的工作小提琴

Link

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

-帮助:)

【讨论】：