jQuery Colorpicker 在点击时更改值答案

【问题标题】：jQuery Colorpicker change value on click outjQuery Colorpicker 在点击时更改值
【发布时间】：2014-03-22 23:14:32
【问题描述】：

我正在使用这个 jQuery Colorpicker http://www.eyecon.ro/colorpicker/#about

有什么方法可以让它在点击颜色选择器时更改输入的值（*颜色代码）？

现在它仅通过单击颜色选择器上的提交按钮来提交选择的颜色。

    <input type="text" value="#FFFFFF">

    <script type="text/javascript">
    $.noConflict();
    jQuery(document).ready(function ($) {
      $('input').ColorPicker({
          onSubmit: function(hsb, hex, rgb, el) {
              $(el).val('#' + hex);
              $(el).ColorPickerHide();
          },
          onBeforeShow: function () {
              $(this).ColorPickerSetColor(this.value);
          }
      })
      .bind('keyup', function(){
          $(this).ColorPickerSetColor(this.value);
      });
    });

</script>

【问题讨论】：

你能详细说明一下，你想改变什么吗？
我想更改输入的颜色代码。我会更新我的问题。

标签： javascript jquery color-picker

【解决方案1】：

找不到好方法，但这里有一个丑陋但希望不是完全坏的方法：

jQuery(document).ready(function ($) {
  var $pickerInput;
  $('input').ColorPicker({ 
      onSubmit: function(hsb, hex, rgb, el) {
          $(el).val('#' + hex);
          $(el).ColorPickerHide();
      },
      onBeforeShow: function () {
          $(this).ColorPickerSetColor(this.value);
          $pickerInput = $(this);
      },
      onHide: function(picker) {
          $pickerInput.val('#' + $(picker).find('.colorpicker_hex input').val());
      }
  })
  .bind('keyup', function(){
      $(this).ColorPickerSetColor(this.value);
  });
});

【讨论】：

谢谢，但它似乎不起作用。我在控制台中没有看到任何错误。
奇怪。你使用的是什么浏览器？这是一个对我有用的JSFiddle。不过，您需要先访问eyecon.ro/colorpicker，才能缓存插件文件。 jsfiddle.net/9a5eR
确实很奇怪，您的示例运行良好。我在 Chrome 中测试，你的可以，但我的不行
哦，抱歉，我天真地假设选择器控件将始终呈现为输入控件的相邻兄弟，因此我的示例仅适用于页面上只有一个输入。让我再看看！
我已经用不那么糟糕的东西更新了我的答案，这将适用于页面上的多个输入。对不起，不知道我在想什么。演示jsfiddle.net/9a5eR/1

【解决方案2】：

这样的事情怎么样？您可以在 onChange 事件中访问十六进制信息并将其分配给某个隐藏元素，在这种情况下，我添加了第二个输入。然后，onHide，你取隐藏元素的值，赋值给当前输入框。

HTML：

<input id="hexVal" type="text" value="#FFFFFF">
<input id="hidden" type="text" value="#FFFFFF">

JavaScript：

jQuery(document).ready(function ($) {
    $('#hexVal').ColorPicker({
        onSubmit: function (hsb, hex, rgb, el) {
            $(el).val('#' + hex);
            $(el).ColorPickerHide();
        },
        onBeforeShow: function () {
            $(this).ColorPickerSetColor(this.value);
        },
        onChange: function (hsb, hex, rgb) {
            $('#hidden').val('#' + hex);
        },
        onHide: function (picker) {
            $('#hexVal').val($('#hidden').val());
        }
    })
        .bind('keyup', function () {
        $(this).ColorPickerSetColor(this.value);
    });
});

JSFiddle here.

【讨论】：

谢谢。我有很多这样的输入，所以这对我来说真的不起作用。
啊，抱歉 - 没有意识到。很高兴您将其与其他答案排序！