Search code examples
javascriptjquerycolor-picker

jQuery Colorpicker change value on click out


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>

Solution

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