颜色选择器更新输入值答案

【问题标题】：Color picker update input values颜色选择器更新输入值
【发布时间】：2013-02-11 05:48:38
【问题描述】：

好吧，我已经花了一整天的时间，但我错过了一些东西，只是想不通。我正在使用这个简单的颜色选择器http://www.dynamicdrive.com/dynamicindex11/colorjack/index.htm

我要做的是更新背景颜色，然后是字体颜色，让用户看到实时结果，并在文本输入框中自动更新十六进制颜色代码。下面是我的代码。

                            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
             <title>Color Picker</title>
             <link href="plugin.css" rel="stylesheet" type="text/css" />
             <script src="plugin.js" type="text/JavaScript"></script>
            </head>
            <body>
            <div id="plugin" onmousedown="HSVslide('drag','plugin',event)" style="TOP: 140px; LEFT: 430px; Z-INDEX: 20;">
             <div id="plugHEX" onmousedown="stop=0; setTimeout('stop=1',100);">F1FFCC</div><div id="plugCLOSE" onmousedown="toggle('plugin')">X</div><br>
             <div id="SV" onmousedown="HSVslide('SVslide','plugin',event)" title="Saturation + Value">
              <div id="SVslide" style="TOP: -4px; LEFT: -4px;"><br /></div>
             </div>
             <form id="H" onmousedown="HSVslide('Hslide','plugin',event)" title="Hue">
              <div id="Hslide" style="TOP: -7px; LEFT: -8px;"><br /></div>
              <div id="Hmodel"></div>
             </form>
            </div>



            <table>
              <tr>
                <td class="formlabel" align="right" valign="top">

                  <!-- color box to show background color and font color -->

                  <div id="currentcolor" style="margin-top:2px;padding:4px 10px 4px 10px;background-color:F1FFCC"><span id="showfontcolor" style="color:">Current Text Color</span></div>

                  <!-- End color box --></td>
                <td valign="top"><table>
                    <tbody>
                      <tr>
                        <td><div class="small">Background Color</div>
                          <input name="colorcode" id="colorcode" value="" maxlength="199" class="textbox" style="width:80px" type="text">
                          <a href="javascript:toggle('plugin','colorcode');">Color Picker</a></td>
                        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
                        <td><div class="small">Text Color</div>
                          <input name="fontcolor" id="fontcolor" value="" maxlength="199" class="textbox" style="width:80px" type="text">
                          <a href="javascript:toggle('plugin','fontcolor');">Color Picker</a></td>
                      </tr>
                    </tbody>
                  </table></td>
              </tr>
            </table>


            <script type="text/javascript">

            //*** CUSTOMIZE mkcolor() function below to perform the desired action when the color picker is being dragged/ used
            //*** Parameter "v" contains the latest color being selected
            function mkColor(v){
            //** In this case, just update DIV with ID="colorbox" so its background color reflects the chosen color

            $S('currentcolor').background='#'+v;
            $('colorcode').value='#'+v;
            }

            loadSV(); updateH('F1FFCC');
            toggle('plugin');

            </script>


            </body>
            </html>

问题在于它不会实时更新输入colorcode 和fontcolor。

【问题讨论】：

什么不起作用？你的问题到底是什么？
我需要它来更新
中的颜色十六进制值

标签： javascript jquery html forms color-picker

【解决方案1】：

因此，您的 javascript 存在一些问题。下面我修复了你的代码：

function mkColor(v){
                var field2update = $('#divUpdateID')[0].innerHTML;
                if (field2update=='colorcode') {
                    $('#currentcolor').background='#'+v;
                    $('#colorcode').value='#'+v;
                } else if (field2update=='fontcolor') {
                    $('#showfontcolor').color='#'+v;
                    $('#fontcolor').value='#'+v;
                }
            }

你所有的 jquery 选择器都坏了。 innerHTML 也是一个 dom 函数而不是 jquery 函数，因此它需要用于 dom 对象而不是 jquery 对象数组。

以下是更新这些内容的方法。您必须弄清楚将其放在代码中的哪个位置，因为我不太清楚它们应该放在哪里：

$("#currentcolor").html("The value it needs to be updated with!");
$("#colorcode").value = "Same as above!";

上面更新后台，下面会更新你的fontcolor：

$("#fontcolor").value = "The value you want!";
$("#currentcolor").css("color", "your text color value here!"); //this line updates the color of the text in the `currentcolor` div;

编辑：

这是对上述代码的重写，也是对您使用的插件的更改：

更换插件：

var type_to_update = ''; //this goes in the global namespace,
...
function toggle(v, type){ //changed to accept which input should be updated
    $S(v).display=($S(v).display=='none'?'block':'none'); 
    type_to_update = type; //updating the global variable 
}

更改您的代码：

function mkColor(v){
    if(type_to_update == 'colorcode' || type_to_update == ''){ //default to changing background color if one of the pickers has not been clicked on.
        $S('currentcolor').background = "#"+v;
        $('colorcode').value = '#'+v;
    }else if(type_to_update == 'fontcolor'){
        $S('currentcolor').css("color", '#'+v);
        $('fontcolor').value = '#'+v;
    }

    loadSV();
    updateH('F1FFCC');
    toggle('plugin');
}

【讨论】：

好的，这很有帮助，我得到了一个工作，但我如何为每个人做一个不同的选择器？这是现场示例helpsavepets.com/colorjack/color-jack.html
@smitty 再次更新以显示如何更新 currentcolor div 中文本的颜色。
仍然无法理解，伙计……我的脑子一片混乱。我把你的例子放在实时链接helpsavepets.com/colorjack/color-jack.html
似乎它只适用于 s single 但一旦我输入 if 语句它就不起作用
我更新了上面的代码，我目前只使用 s 单并且没有 if 语句。