jQuery Colorpicker change value on click out

Question

I am using this jQuery Colorpicker http://www.eyecon.ro/colorpicker/#about

Is there any way I can make it change the value(*color code) of the input on click out of the colorpicker?

Now it submits the color picked only by clicking the submit button on the 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>

Answer 1

Can't find a good way, but here's an ugly though hopefully not entirely bad way of doing it:

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

Answer 2

How about something like this? You can access the hex information in the onChange event and assign it to some hidden element, in this case I've added a second input. Then, onHide, you take the value of the hidden element and assign it to the current input box.

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.