javascript - 如何从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">

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

希望对您有所帮助:)