如何让Iris颜色选择器在输入框赋值后自动匹配对应颜色？

我有一个关联Iris颜色选择器的输入字段，当表单处于更新模式时，输入框已经被设置了颜色值，但Iris的圆形选择点和竖条选择器并未自动定位到对应颜色（如图所示：）。相关代码如下：

HTML 代码 #

<script type="text/javascript" th:src="@{/js/jquery-ui.min.js}"></script>
<script type="text/javascript" th:src="@{/js/lib/iris.js}"></script>
<div class="mb-5">
    <label for="" class="form-label form-labe-custom me-2">Couleur :</label>
    <div class="mb-3 parent-select2-colors">
         <input type="text" class="couleurpicker form-control" name="couleur" maxlength="7" />
    </div>
</div>

JavaScript 代码 #

$(document).ready(function () {
    $(".couleurpicker").iris({
        width: 300,
        hide: true,
        mode:'hsl',
        controls: {
            horiz:'s',
            vert:'l',
            strip:'h'
        },
        border:true,
        change:function(event, ui) {
            $(event.target).attr('style','background-color: '+ui.color.toString()+' !important');
        }
    });
    $(document).on("click", function (e) {
        if ( ! $(e.target).is(".iris-picker-inner") ) {
            $('.couleurpicker').iris('hide');
        }
    });
    $('.couleurpicker').on("click", function (event) {
        $('.couleurpicker').iris('hide');
        $(this).iris('show');
        return false;
    });
    ...
    // 当进入表单编辑模式时：
    $("#formEdit input[name='couleur']").val(rowData.couleur);
    ...
});

解决方案 #

问题出在仅修改输入框的value无法触发Iris内部状态更新，需要显式调用Iris的API同步颜色：

1. 动态更新场景（编辑模式）
   在设置输入框值之后，调用iris('color', 颜色值)方法通知Iris更新内部状态，再触发change事件同步UI：

// 替换原编辑模式代码
const targetInput = $("#formEdit input[name='couleur']");
const colorValue = rowData.couleur;
targetInput.val(colorValue)
           .iris('color', colorValue) // 设置Iris内部颜色
           .trigger('change'); // 触发事件同步选择器UI和背景样式

2. 初始化同步场景（页面加载时已有值）
   如果输入框在页面加载时就有默认颜色值，可以在Iris初始化时传入color参数：

$(".couleurpicker").iris({
    // 其他配置项...
    color: $(".couleurpicker").val(), // 初始化时同步已有颜色
    change:function(event, ui) {
        $(event.target).attr('style','background-color: '+ui.color.toString()+' !important');
    }
});

原理说明 #

Iris组件内部维护独立的颜色状态，直接修改输入框的value不会触发它的UI更新。通过iris('color', colorValue)可以直接覆盖内部颜色值，触发change事件则会让选择器的圆形控制点、色相条同步到对应位置，同时执行你的change回调更新输入框背景。

内容的提问来源于stack exchange，提问作者pheromix