javascript - Bootstrap Colorpicker，如何在下拉列表中设置颜色值框？

Question

我正在使用Bootstrap Colorpicker 2.3 ，但我的要求是，我想在颜色选择器内添加文本字段值框，like this example ， 是否可以 ？请问有人可以帮我吗，先谢谢了。

Answer 1

用一些额外的代码更新了你的 fiddle 。

插件有 changeColor 事件。使用它来更新输入元素值。

$('.demo2').on('changeColor.colorpicker', function(a, b, c) {
    $('.store').val($(this).colorpicker('getValue'))
});

$('.demo1').colorpicker();

$('.demo2').colorpicker({
  template: '<div class="colorpicker dropdown-menu">' +
    '<div class="colorpicker-saturation"><i><b></b></i></div>' +
    '<div class="colorpicker-hue"><i></i></div>' +
    '<div class="colorpicker-alpha"><i></i></div>' +
    '<div class="colorpicker-color"><div /></div>' +
    '<div class="colorpicker-selectors"></div>' +
    '<div class="colorpicker-selectors"></div>' +
    '<input type="text" value="" class="store" />' +
    '</div>',
  input: '.store'
});


$('.demo2').on('changeColor.colorpicker', function(a, b, c) {
  $('.store').val($(this).colorpicker('getValue'))
});

.demo1,
  .demo2 {
    width: 200px;
    margin: 30px;
  }

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.js" type="text/javascript"></script>
<link href="/css/normalize.css" type="text/css" rel="stylesheet">
<link href="/css/result-light.css" type="text/css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.3.0/js/bootstrap-colorpicker.js" type="text/javascript"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.3.0/css/bootstrap-colorpicker.min.css" type="text/css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" type="text/css" rel="stylesheet">





<div class="input-group demo1">
  <input type="text" value="" class="form-control" />
  <span class="input-group-addon"><i></i></span>
</div>


<div class="form-group">
  <div class="field-title">With template</div>
  <div class="input-group input-picker demo2">
    <input type="text" value="" class="form-control" />
    <div class="dss"></div>
    <span class="input-group-addon"><i></i></span>
  </div>
</div>

Fiddle