如何檢測文本輸入中的顏色選擇器的值，並立即在預覽中顯示它？

Question

我想立即顯示顏色變化的插件輸出預覽。從輸入文本獲得的值，我將使用

• KEYUP
• 上點擊改變

功能。

但在顏色選擇器的用戶的情況下，使用顏色選擇器使上述功能不能正常工作互動，顯然只會如果用戶集中的工作或輸入一些，所以我用了setInterval功能

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

這是工作得很好，我可以顯示用戶選擇的輸出。

這裏是我的問題：

1. 這會給額外的負擔或負荷我的插件或使瀏覽器 不響應？
2. 當用戶 更改時，顯示顏色值的其他替代方法？

Answer 1

您可以添加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 2

當您更改值時可以更新顏色，無需混淆間隔。並且，由於它與setInterval一起工作，所以它必須處理更改，並且插件將在您單擊顏色時更新此值。所以：

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

應該這樣做。

Answer 3

我很驚訝沒有人直接使用ui對象。在我的情況下，更改偵聽器+ jQuery選擇器沒有得到我更新的顏色值。對於這一點，我必須做到以下幾點：

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