Question

我想立即显示颜色变化的插件输出预览。要从输入文本中获取值，我将使用

KEYUP
改变
点击

功能

但是在颜色选择器的情况下，用户正在与颜色选择器进行交互，因此上述功能无法正常工作，显然只有在用户关注或输入一些输入时才会起作用，所以我使用了setInterval功能

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

这完全正常我可以显示用户正在选择的输出。

这是我的问题：

这会给我的插件或浏览器造成额外的负担或负担非响应性？
用户显示颜色值的任何其他替代方法变化？

Answer 1

我很惊讶没有人直接使用ui对象。在我的例子中，更改侦听器+ jQuery选择器没有得到更新的颜色值。为此，我必须做以下事情：

$('.my-color-field').wpColorPicker({
  change: function(event, ui){
    var theColor = ui.color.toString();
  } 
});

Answer 2

您可以添加onChange事件。

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

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

Answer 3

当值更改时可以更新颜色时，无需乱丢间隔。由于它与setInterval一起使用，因此它必须处理更改，并且当您单击颜色时插件将更新此值。所以：

jQuery('#bgcolor').change(function(){
    jQuery(".bat-gh").css( "background", $(this).val() );
});

应该这样做。

Answer 4

/* jQuery */
if( $('.stwpmodpop-cpicker').length ) {

    $('.stwpmodpop-cpicker').wpColorPicker({
        change: function( event, ui ) {
            var theColor = ui.color.toString();
            $(this).parent().parent().parent().siblings('.stwpmodpop-fillcolor').html( theColor );
        }
    });
}

/* HTML */
<p>
    <input type="text" class="form-control stwpmodpop-cpicker" name="colorpicker_example" value="" />
    <span class="stwpmodpop-fillcolor"></span>
</p>

如何在文本输入中检测颜色选择器的值并立即在预览中显示？

4 个答案: