CODEWITHSUNDEEP
jquerytwitter-bootstrapcolor-picker
kneidels
kneidels

Reputation: 914

deleting bootstrap colorpicker value

i have a simple text field which has a colorpicker attached to it. i have added an icon next to the field, which is able to remove the content of the field value (which was generated by the color picker). code is below.

the strange thing is that after i delete the value - if i click elsewhere on the page, the value comes back! code and simple sample below.

reproduction steps:

  1. generate hex code by using the colorpicker.
  2. click on the X to delete the field value.
  3. click elsewhere in the page body, the value will return.

many thanks

HTML code:

  <input type="text" name="x_fontColor" id="x_fontColor" size="30" maxlength="10" value="" class="colorpicker">
  <span class="trigger" data-for="x_fontColor">X </span>

JS:

$(".colorpicker").colorpicker();            
$(".trigger").click(function(){
   $("#"+$(this).data('for')).val('');              
});

FIDDLE LINK: http://jsfiddle.net/W2Mcy/

Upvotes: 1

Views: 4101

Answers (2)

Eric Sloan
Eric Sloan

Reputation: 189

I know this is an old thread, but if someone else runs into this issue you can assign 'transparent' as the value. 

.colorpicker('setValue','transparent');

Unfortunately the color picker will display 'transparent' in the field so it's not entirely a null or '' value, but it's close and it should work if you're doing a live update of the color in a preview type of situation.

Hope this helps.

Upvotes: 1

Praveen
Praveen

Reputation: 56519

From Docs, it seems you can use 

.colorpicker('setValue', value)

I tried it in your fiddle, and it is working but the below sets the #ff0000 as default color. 

$(".trigger").on('click', function(){
                $('input').colorpicker('setValue', '').val(''); // clear both value of input and set default color  
            });

See this updated fiddle.

Hope you understand.

Upvotes: 1

Related Questions