jQuery - 检测虹膜颜色选取器更改时的输入字段更改

jQuery - Detect Input Field Change On Iris Color Picker Change

本文关键字：字段 输入 选取 检测 颜色 jQuery      更新时间：2023-09-26

我正在尝试通过输入字段的id来侦听输入字段的变化，该输入字段绑定到虹膜颜色选择器。下面是示例代码：

.HTML

输入字段 

<input type="text" id="input_id" class="elmnt_color"/>

要更改的元素

<div id="box">Manipulate this!</div>

jQUery

绑定更改

$('.elmnt_color').iris({
    change: function(event, ui) {   
    $(this).siblings("input").change(); 
    }
});

通过其id侦听输入变化 

$("#input_id").on("change", function(){
   var style = '<style type="text/css">';
   style += '#box {background: ' + $(this).val() + '}';
   style += '</style>';
   $('head').append(style);
});

问题：

  • 很慢
  • 晚了一步。例如："当虹膜颜色选择器的颜色发生变化时从blue到red，#box背景色依然blue，而不是red.等等。

问题：

我应该使用什么来触发虹膜颜色选择器更改input field更改，而不是这些代码：

change: function(event, ui) {   
$(this).siblings("input").change(); 
}

所以我可以摆脱上面提到的问题。

任何帮助将不胜感激！

此致敬意

  • 无需触发和处理额外的input change事件。
  • 元素的CSS样式可以使用jQuery .css((更改。这绝对比每次更改都添加<style>要好得多。

因此，您的代码可以简化为以下内容：

小提琴。

$(document).ready(function()
{
    var box = $('#box');
    $('.elmnt_color').iris(
    {
        change: function(event, ui)
        {
            box.css("background", this.value);
        }
    });
});
相关文章：