Question

I’m using the jpicker jquery plugin for users to choose a color and the issue i’m having is that if you choose any color from the 4th or 5th column of default colors, the value does not show up in my input box. Any other value does though.

Here’s a snippet of how i’m calling the code:

if($('#hexPicker').length) {
    $('#hexPicker').jPicker({
        window: {
            position: {
                y: 'center'
            }
        }   
    });
}

<input type="text" name="color" class="small" id="hexPicker"  />

I created a test account for you guys to use on the dev server so you can see what I mean. I’m not able to recreate this issue anywhere else.

Answer 1

Its changing the text color inside the input box to white so it’s invisible. If you select a color and use firebug or developer tools, you’ll see this:

<input type="text" id="hexPicker" class="small" value="02140b" name="color" style="background-color: rgb(15, 86, 51); color: rgb(255, 255, 255);">

If you use firebugs edit feature to change the values at the end under “color” to 0,0,0 then the value appears. See below.

<input type="text" id="hexPicker" class="small" value="02140b" name="color" style="background-color: rgb(15, 86, 51); color: rgb(0, 0, 0);">

A possible fix would be to add some jQuery so that whenever the value changes you manually reset the color of the text to black:

$('#hexPicker').change(function() {
     $('#hexPicker').css('color','rgb(0,0,0)');
});