sun sun - 2 months ago 10
jQuery Question

How to detect the value of color picker in text input and show it in preview instantly?

I want to show a preview of plugin output with color changes instantly. For getting values from input text I will use the


  • keyup

  • changed

  • on click



functions.

But in case of color picker user is interacting with the color picker so the above functions are not working, obviously it will work only if user focus or enter some input so I used the
setInterval
function

setInterval(function () {
var h = jQuery('#bgcolor').val();
jQuery(".bat-gh").css("background", h);
}, 100);


This is working perfectly fine I can show the output which the user is selecting.

Here is my question:


  1. Will this create extra burden or load to my plugin or make the browser
    non-responsive?

  2. Any other alternative way to show the color values when user
    changes?


Answer

You can add onChange event.

var myOptions = {
    // a callback to fire whenever the color changes to a valid color
   -----> change: function(event, ui){}, <-----------------------
    };

$('.my-color-field').wpColorPicker(myOptions);