點擊了

Question

我使用這個jQuery的取色http://www.eyecon.ro/colorpicker/#about

jQuery的取色變化值有什麼辦法可以把它改變的值上點擊輸入（*顏色代碼）從顏色拾取的？

現在它提交的顏色只能通過點擊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事件中的十六進制信息並將其分配給某個隱藏的元素，在這種情況下，我添加了第二個輸入。然後，在隱藏的情況下，您將隱藏元素的值分配給當前輸入框。

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。