Update bootstrap color picker manually

Question

I'm using the following color picker on bootstrap:

http://www.eyecon.ro/bootstrap-colorpicker/

I'm using the following code the change the background color of an element on the page:

<input type="text" id="mypicker" name="mypicker" value="" class="input-mini color"/>

<script type="text/javascript">
    $(function() {
        $("#mypicker").val('#ffffff');

        $("#mypicker").colorpicker({
            format: 'hex'})
            .on('changeColor', function(event) {

                $('#target').css('background',event.color.toHex());             
            }
        );
    });
</script>

<div id="target" style="height:50px;width:50px;"></div>

It works apart from when I try to manually enter a hex code by typing it in. It just doesn't seem to trigger the update of the color on keyup or even unfocus.

I found a way by editing the src 'update:' to add:

this.element.trigger({
                type: 'changeColor',
                color: this.color
            });

However, i would have thought there would have been a better way.

Answer 1

According to the documentation you should be able to do the following:

$('#mypicker').on('keyup', function() {
    $(this).colorpicker('setValue', $(this).val());
});