Yii2 KartikV Color Input如何获取不同输入框的选中颜色值

1. 给所有颜色输入框加统一标识类 #

先修改Yii2里的Color Input组件配置，给每个输入框的options添加共同的class，方便后续统一绑定事件。示例中两个字段的修改如下：

// head_skin_scars字段的widget配置
'options' => ['placeholder' => '   ', 'class' => 'skin-color-input'],

// face_skin_scars字段的widget配置
'options' => ['placeholder' => '   ', 'class' => 'skin-color-input'],

2. 绑定颜色变更事件 #

KartikV的Color Input基于bootstrap-colorpicker，自带changeColor事件，可直接用来捕获颜色选择操作。假设你的绘图脚本用currentDrawColor变量存储当前绘图颜色，对应的jQuery代码如下：

// 初始化默认绘图颜色（可选）
let currentDrawColor = 'black';

// DOM加载完成后绑定事件
$(document).ready(function() {
    $('.skin-color-input').on('changeColor', function(e) {
        // 因配置中preferredFormat为name，直接取颜色名称
        currentDrawColor = e.color.name;
        // 若绘图脚本需即时更新颜色，在此调用你的颜色更新方法
        // 示例：updateDrawingColor(currentDrawColor);
    });
});

关键说明 #

• 无论用户从调色板点选颜色，还是手动输入颜色值，changeColor事件都会触发，确保颜色值实时同步。
• 若需要十六进制格式的颜色值（如#ff0000），可将e.color.name替换为e.color.toHex()，或者调整组件pluginOptions里的preferredFormat为'hex'。
• 这段代码需放在DOM加载完成后执行，要么包裹在$(document).ready()中，要么通过Yii2的$this->registerJs()方法注册。

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