JQuery Colorpicker изменить значение на кнопку из

Question

Я использую этот JQuery Colorpicker http://www.eyecon.ro/colorpicker/#about

Есть ли способ, что я могу сделать это изменить значение (* код цвета) входа на клик из ColorPicker?

Теперь он отправляет выбранный цвет только нажатием кнопки отправки на 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

Не удается найти хороший способ, но вот некрасиво, хотя, надеюсь, не совсем плохой способ сделать это:

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

Как о чем-то вроде этого? Вы можете получить доступ к шестнадцатеричной информации в событии onChange и присвоить ее некоторому скрытому элементу, в этом случае я добавил второй ввод. Затем, вHide, вы берете значение скрытого элемента и назначаете его текущему полю ввода.

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.