How to hide the color value input text, replace by free user input

[adrienaury]

Description

Hi, This is a question or a feature request :)

I would like to do something like this

<div id="cat_0" class="input-group" title="Using input value">
    <input type="text" class="form-control" value="Category 1"/>
    <input type="hidden" class="form-control" value="#DD0F20FF"/>
    <span class="input-group-append">
        <span class="input-group-text colorpicker-input-addon"><i></i></span>
    </span>
</div>
<div id="cat_1" class="input-group" title="Using input value">
    <input type="text" class="form-control" value="Category 2"/>
    <input type="hidden" class="form-control" value="#0FDD20FF"/>
    <span class="input-group-append">
        <span class="input-group-text colorpicker-input-addon"><i></i></span>
    </span>
</div>

I use 2 inputs in the same row (as described here in the bootstrap documentation) the first one only is seen by the user, where he can type anything he wants, the second one is hidden (and contains the color code).

This doesn't not seem to work because the picker component update the value of both inputs.

Thank you for this project and your response :)

[adrienaury]

Ok, nevermind, i found the solution by reading the source code :

I specified the target input id like this $('#cp2').colorpicker({input:'#target_input'});

I may have miss this in the documentation.