jQuery Colorpicker在單擊時更改值

Question

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

有什么辦法可以使它從色選器中單擊時更改輸入的值（*顏色代碼）？

現在，它僅通過單擊“顏色選擇器”上的“提交”按鈕來提交選擇的顏色。

    <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事件中訪問十六進制信息，並將其分配給某些隱藏元素，在這種情況下，我添加了第二個輸入。 然后，在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在這里 。