如何从 js 代码触发颜色对话框

Question

我有

<input type="color" id="colorDialogID">
<div id="textToColorID">Text to color</div>
<input type="button" id="setColorButtonID">  

我想通过单击按钮来显示颜色对话框。当我选择特定颜色并按"确定"时，一些文本以获取所选颜色。

我需要为此js代码。我现在正在谷歌搜索将近一个小时，以找到一种方法如何从代码显示代码选择器窗口，但没有成功。我只得到一种插件。我不明白为什么一切都必须如此复杂javascript.

Answer 1

好的，为了将来参考，提供一段代码总是好的 - 甚至更好的是JSFiddle链接，但这就是我现在得到的。

document.getElementById("setColorButtonID").addEventListener("click", function() {
document.getElementById("colorDialogID").focus();
document.getElementById("colorDialogID").value = "#FFCC00"; //Set the default color  NOTE: Remove the line to get the default of #000000
document.getElementById("colorDialogID").click();
});
function getColor() {
var color = document.getElementById("colorDialogID").value;
document.getElementById("textToColorID").style.color = color;
}

#colorDialogID {
position: absolute;
visibility: hidden;
}

<input type="color" id="colorDialogID" onchange="getColor(this)">
<div id="textToColorID">Text to color</div>
<input type="button" id="setColorButtonID" value="Edit Color">

如果您愿意，我可以在代码中添加一些注释以逐行解释它 - 但这应该有效。

希望对:)有所帮助

Answer 2

看看jscolor。它非常简单，可以轻松实现您正在寻找的功能。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js"></script>
Color: <input class="jscolor" value="ab2567">