用于单独输入字段的 Bootstrap Colorpicker 插件答案

【问题标题】：Bootstrap Colorpicker Add-on for Separate Input Field用于单独输入字段的 Bootstrap Colorpicker 插件
【发布时间】：2017-11-21 01:31:06
【问题描述】：

我正在尝试使用Bootstrap Colorpicker 来控制输入字段中文本的颜色。我希望附加字段附加到输入字段，而不是默认关联的十六进制输入框。

具体来说，我有一个标题的文本输入字段，并且我想要一个附加的颜色选择器框，该框旁边将控制其颜色（如在其他地方显示的那样）。我不知道如何在没有标准十六进制输入字段的情况下使用 Colorpicker 附加框。

我如何正确地为不相关的输入字段编写插件代码，并且仍然保留 JS 中的值以供其他地方使用？

谢谢！

HTML

<!DOCTYPE html>
<html lang="en">
<head>
 <!-- Style -->
  <link href="assets/css/bootstrap.css" rel="stylesheet">
  <link href="assets/css/bootstrap-colorpicker.min.css" rel="stylesheet">
 <!-- JavaScript -->
  <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
  <script src="assets/js/bootstrap.min.js"></script>
  <script src="assets/js/bootstrap-colorpicker.min.js"></script>
</head>
<body>
<div class="container">
<form class="form-horizontal" action="process-campaign-creative.php" method="POST" enctype="multipart/form-data">
  <div class="form-group">
    <label for="title" class="control-label">
      Title
    </label>
  <div class="input-group">
    <input type="text" class="form-control" name="title" id="title">

    <!-- PROBLEM HERE: Doesn't show color box (and value doesn't seem to change) -->
    <span id="cp1" class="input-group-addon colorpicker-component" value="#00AABB"><i></i></span>

    </div>
  </div>
</form>
</div>
</body>

//SRC: https://github.com/farbelous/bootstrap-colorpicker/blob/master/dist/js/bootstrap-colorpicker.js
<script type="text/javascript">
    $('#cp1').colorpicker();
</script>

CSS

//SRC: https://github.com/farbelous/bootstrap-colorpicker/blob/master/dist/css/bootstrap-colorpicker.css`

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

您希望将所选颜色直接应用于输入字段内容。
（其中包含“标题”的用户文本，而不是十六进制颜色数字）。

好的...但是 BootStrap 的 colorPicker 实际上使用了input 字段来使用键盘选择颜色。

所以我们必须“破解”一点...
好在我们可以从 colorPicker 中解绑输入的keyup 事件。

然后我们必须确保用户的文本将保留在 colorPicker 的 changeColor 事件中...并获取颜色编号 directly from the API (using .data('colorpicker')) 以将其应用于用户的文本。

下面是您希望它执行的代码：（运行 sn-p）

$(function() {
  
  // Initiate the colorpicker
  $("#cp").colorpicker();

  // Unbind the keyup event from the input (which normally changes the color.)
  $("#title").off("keyup");
  
  // Define a variable for the user's text at global scope.
  var titleText;

  // Get the text value inputed by the user as soon as the colorPicker is accessed.
  $('#cp-icon').on("mousedown",function(){
    titleText = $("#cp>input").val();
    //console.log( titleText );
  });
  
  // On color selection, affect the input's text with it.
  $("#cp").on("changeColor",function(){
    //console.log("change event");
    var colorPicked = $('#cp').data('colorpicker').input[0].value;
    $("#title").val(titleText).css("color",colorPicked);
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.1/css/bootstrap-colorpicker.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.1/js/bootstrap-colorpicker.min.js"></script>


<body>
  <div class="container">
    <form class="form-horizontal" action="process-campaign-creative.php" method="POST" enctype="multipart/form-data">
      <div class="form-group">
        <label for="title" class="control-label">
          Title
        </label>
        <div class="input-group" id="cp">
          <input type="text" class="form-control" name="title" id="title">
          <span class="input-group-addon colorpicker-component"><i id="cp-icon"></i></span>
        </div>
      </div>
    </form>
  </div>
</body>

CodePen 也一样。

【讨论】：

【解决方案2】：

你应该匹配 input 标签内的颜色，而不是 span 内的颜色

HTML：

<div class="input-group colorpicker-component ">
   <input type="text" value="#00AABB" class="form-control"/>
   <span class="input-group-addon"></span>
</div>

JS：

 $('.colorpicker-component').colorpicker();

【讨论】：