Question

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

具体来说，我有一个标题的文本输入字段，我希望字段旁边有一个附加的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>

JS

//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`

Answer 1

您应匹配输入标记内的颜色，而不是内部范围

HTML：

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

JS：

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

Answer 2

您想直接在输入字段内容上应用所选颜色（其中包含用户＆＃34;标题＆＃34;的文字，而不是十六进制颜色编号）。

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

所以我们必须＆＃34;破解它＆＃34; 一点......
好消息是我们可以从colorPicker解除输入的keyup事件。

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

以下是您希望它采取行动的代码：（运行代码段）

＆＃13;

$(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);
  });
});

＆＃13;

<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>

＆＃13;

CodePen上的相同内容。

用于单独输入字段的Bootstrap Colorpicker附加组件

2 个答案: