为什么我的 jscolor 颜色选择器无法正常工作？答案

【问题标题】：Why is my jscolor color picker not working properly?为什么我的 jscolor 颜色选择器无法正常工作？
【发布时间】：2019-06-13 01:54:50
【问题描述】：

我已经下载了最新版本的jscolor.js（2.05），但是在使用时遇到了一些问题。在 CSS 中，我一直在尝试停止在按钮上显示颜色的值。我尝试使用'valueElement：null;'但我收到 valueElement 的“未知属性”错误。后来我发现 'borderWidth'、'backgroundColor' 和 'insetColor' 也会抛出同样的错误。

因为 valueElement 无法识别，我无法禁用按钮上的颜色值。

我怀疑这也导致选择器在网页中打开时发生偏移。矩形中间的彩虹似乎在整个选择器中偏移。这是问题图片的链接：(https://ibb.co/9N8dHXs)

如何禁用按钮上的颜色值，以及导致所有这些属性无法识别的原因是什么？

  .jscolor {
            border: white;
            width: 50px;
            position:'right';

            valueElement: null; /*throws 'Unknown Property' error*/
            shadow: false;
            borderWidth:0;   /*throws 'Unknown Property' error*/
            backgroundColor:'transparent'; /*throws 'Unknown Property' error*/
            insetColor:'#000'; /*throws 'Unknown Property' error*/
            padding: 0;
        }

<div class="sidebar" id="sidebar">
            <div>
                <h4 class="sect-head">BACKGROUND</h4>
                <div class="sect-child">
                    Sky Color
                    <input class="jscolor" onchange="setRendererColor(this.jscolor)" value="FFE4A6">
                </div>

【问题讨论】：

标签： html css jscolor

【解决方案1】：

如果您仔细查看他们的示例页面，请点击此处：http://jscolor.com/examples/ 并搜索“链接到不同元素”示例，您会找到所需的内容。

据我所知，他们的按钮代码与您的代码有 3 处不同。我怀疑第一个无关紧要。

他们使用button 而你使用input type='button'
在 class 属性中，它们还提供看似 json 的内容 - 您只提供了 jscolor 类
您已为元素指定了一个值 - 这既被打印出来又被用作背景颜色
您正在使用事件处理程序来更新按钮的颜色。
当用户按下它时，它会被赋予 jscolor-active 类 而不是 jscolor - 因此，您的 css 不再适用。相反，您可能希望向按钮添加除 jscolor 之外的另一个类。这样 - javascript 仍然可以识别和操作元素，并且您添加的类将保持不变，因此您的 css 将继续适用。

这是你的代码：

<input class="jscolor" onchange="setRendererColor(this.jscolor)" value="FFE4A6">

这是他们的：

<button class="jscolor
    {valueElement:'valueInput', styleElement:'styleInput'}">
    Click here to pick a color
</button>

【讨论】：

谢谢，但这并没有真正解决我的问题。如果您转到示例部分中的“自定义外观”，我将使用与它们相同的“输入”标签，而不是使用“按钮”标签，因此它应该仍然有效。另外，你在哪里看到他们放了一个 json？另外，我尝试了单独的类，但它仍然只影响按钮而不影响选择器本身。我还提供了我的颜色选择器出现故障的链接：[链接] (ibb.co/9N8dHXs)
好吧，我现在不清楚你的愿望。让他们解决掉，好吗？你说你想“停止在按钮上显示颜色的值”——这可能意味着两件事。您希望隐藏文本例如：“#FF0000”，还是希望按钮不变成红色？你想用 CSS 对选择器做什么？您在原始问题中没有提到这个愿望。我回答了你问的问题。你的意思是问别的吗？
我很抱歉造成混乱，我基本上有一个我想解决的问题，这导致我偶然发现了一个更大的问题，我也想弄清楚。 1.我想做你描述的前者，'隐藏文本，例如：“#FF0000”。 2.然后当我试图弄清楚这一点时，我发现'valueElement'和其他一些属性会引发未知属性错误。 3. 然后我认为我的第二个问题可能与为什么我在颜色选择器上出现这个故障（我发送图像链接的那个）有关。非常感谢你帮助我，对不起，我不是很清楚

【解决方案2】：

这是一个简单的代码，向您展示如何正确使用input：

generated_button = document.querySelector("#generated-button");
function update_font_color(jscolor) {
    // 'jscolor' instance can be used as a string
    generated_button.style.color = '#' + jscolor
}

 <body>
 <div id="generated-button-div">
       <input id="generated-button" type="button" value="Default Label">
 </div>
 <div class="input-wrapper">
       <label for="font-color">Font Color:</label>
       <input name="font-color" id="font-color" class="jscolor {onFineChange:'update_font_color(this)'}" value="000000">
 </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.js"></script>
 </body>

【讨论】：