1. ホーム
  2. 質問と答え
  3. 独立した入力フィールド用のブートストラップカラーピッカーアドオン

独立した入力フィールド用のブートストラップカラーピッカーアドオン

2017-06-18 12 views
0

Bootstrap Colorpickerを使用して、入力フィールドからのテキストの色を制御しようとしています。アドオンフィールドを入力フィールドにアタッチしますが、デフォルトの関連する16進数の入力ボックスは付けません。独立した入力フィールド用のブートストラップカラーピッカーアドオン

具体的には、私はTitleのテキスト入力フィールドを持っています。フィールドの隣に、その色を管理するアドオンのColorpickerボックスが必要です（他の場所で表示されています）。標準の16進数の入力フィールドを使わずにColorpickerアドオンボックスを使用する方法を理解できません。

無関係な入力フィールドのアドオンを正しくコーディングするにはどうしたらいいですか？

ありがとうございました！

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`

出典

2017-06-18 Austin

答えて

0

あなたはinputタグ内の色と一致する必要がありますではなく、内部のスパン

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

出典

2017-06-19 00:09:40 Olga

0

。
（16進数ではなく、「タイトル」のユーザーのテキストが含まれています）。

いいえ...しかし、BootStrapのcolorPickerは実際にキーボードを使用してinputフィールドを使用して色を選択します。

だから我々は少し「それをハック」に持っている...
良いことは、私たちがするColorPickerからの入力のkeyupイベントをアンバインドすることができるということです。

次に、ユーザーのテキストがcolorPickerのchangeColorイベントに残っていることを確認する必要があります。また、色番号directly from the API (using .data('colorpicker'))を取得してユーザーのテキストに適用します。あなたが行動することを望んだとしてだからここ

はコードです：（スニペットを実行します）CodePenで同じ

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

。

出典

2017-06-19 00:46:39

関連する問題

 関連する問題