Layui颜色选择器（colorpicker）如何回调赋值-Layui教程-PHP中文网

Layui 2.8+ colorpicker 仅支持 done 回调，触发于确认选色时，接收 color（十六进制字符串）和 othis（jQuery 对象）；input 值始终为 #rrggbb，format 参数不影响其显示；动态生成需 DOM 稳定后渲染；IE11 不兼容。

colorpicker 的 change 回调怎么绑定

必须用 done，不是 change 或 onselect —— layui 2.8+ 的 colorpicker 只暴露 done 这一个回调函数，其他名字全无效。

它在用户确认选色（点确定、回车、失焦）后触发，不是实时响应拖拽或输入。如果想“边调边响应”，得自己监听 input 事件，但那会绕过 colorpicker 内部校验逻辑，容易出错。

done 回调接收两个参数：color（十六进制字符串，如 "#ff6700"）和 othis（当前触发的 <input> 元素 jQuery 对象）
别在 done 里直接改 othis.val() —— colorpicker 已经帮你填好了，再写一次可能触发重复渲染
如果需要同步到其他字段（比如隐藏域、data 属性），这时才是 done 的典型用场

layui.use('colorpicker', function(){
  var colorpicker = layui.colorpicker;
  colorpicker.render({
    elem: '#color-input',
    done: function(color, othis){
      // ✅ 正确：赋值给关联的 hidden input
      document.getElementById('color-value').value = color;
      // ✅ 正确：更新预览块背景
      document.querySelector('.preview-box').style.backgroundColor = color;
      // ❌ 避免：othis.val(color) —— 重复赋值，且破坏内部状态
    }
  });
});

为什么 input 值没变，但 done 里 color 是对的

常见于用了 format: 'rgb' 却期望 input 显示 #rrggbb —— colorpicker 的 format 参数只控制 done 回调返回的 color 类型，**不改变 input 框的显示格式**。

input 框永远显示十六进制（#rrggbb），哪怕你设了 format: 'rgb'，done 里拿到的是 "rgb(255,103,0)"，但 input 里还是 "#ff6700"。

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

要让 input 显示 rgb，得手动覆盖：othis.val(color)（仅限 done 中）
但注意：这样会导致下次打开面板时初始值解析失败（colorpicker 内部只认 #xxx），所以不推荐
真正需要 rgb 的场景，建议只在 done 里转换，input 保持十六进制

动态生成的 input 怎么绑定 colorpicker

不能在 DOM 插入后立刻调用 colorpicker.render() —— Layui 的组件渲染依赖元素已存在于文档流中，且需确保 CSS 样式已加载完毕。常见错误是插入节点后马上 render，结果面板点不开或样式错乱。

确保节点已 append 到 body 或指定容器内，再调用 render
避免重复初始化：同一个 elem 多次 render 会报错 "colorpicker has been existed"
动态场景建议加防重：用 data-initialized="true" 标记，或用 layui-colorpicker class 判断是否已渲染

// ✅ 安全做法
var $newInput = $('<input type="text" class="layui-input" id="dyn-color">');
$('#container').append($newInput);
// 等待下一帧，确保渲染完成
setTimeout(function(){
  layui.colorpicker.render({
    elem: '#dyn-color',
    done: function(color){ console.log(color); }
  });
}, 0);

IE11 下 colorpicker 不弹出或报错

Layui 2.8+ 官方已放弃 IE11 支持，colorpicker 依赖 CSS.supports 和 Promise，IE11 原生不支持，会直接卡在初始化阶段，控制台报 "Object doesn't support property or method 'supports'"。

没有兼容补丁；强行引入 polyfill（如 core-js）也大概率失败，因为 colorpicker 的 DOM 结构和事件绑定大量使用现代 API。