点击时jQuery Colorpicker更改值

时间:2014-02-21 12:24:14

标签: javascript jquery color-picker

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

有什么方法可以让我在点击颜色选择器时更改输入的值(*颜色代码)?

现在它只通过点击Colorpicker上的提交按钮提交颜色。

    <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>

2 个答案:

答案 0 :(得分:4)

无法找到一个好方法,但这里有一个丑陋的,但希望并非完全糟糕的做法:

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);
  });
});

答案 1 :(得分:1)

这样的事情怎么样?您可以访问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