Update bootstrap color picker manually

css, javascript, jquery, twitter-bootstrap

Solution

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

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

Problem

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.

Original source