I have integrated a color picker from Bootstrap into my project.
You can find the color picker here:
To change the background color of an element on my page, I am using the following code:
<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>
Although this functionality works well, I encountered a problem when trying to manually enter a hex code by typing it in. The color does not update on keyup or unfocus events.
To solve this issue, I made a modification to the source code under 'update:', adding the following lines:
this.element.trigger({
type: 'changeColor',
color: this.color
});
This workaround resolved the issue, but I believe there might be a better solution available.