layui 2.8+ colorpicker 仅支持 done 回调,于确认选色(点确定、回车、失焦)时触发,接收 color(十六进制字符串)和 othis(jquery 对象),input 值恒为 #rrggbb,format 参数不影响其显示。
colorpicker 的 done 回调是唯一可靠的颜色获取入口
别再找 change、onselect 或其他名字的回调——layui 2.8+ 的 colorpicker 只暴露 done 这一个有效回调函数。它在用户确认选色(点确定按钮、按回车、或 input 失焦)后触发,不是实时响应拖拽或输入框修改。
常见错误是把 done 当成实时监听器用,结果发现颜色没变就触发了;或者误以为 change 还存在,写了却完全不执行。
-
done接收两个参数:color(十六进制字符串,如"#ff6700")和othis(当前<input>的 jQuery 对象) - 即使你配置了
format: 'rgb',color参数在done中仍可能是"rgb(255,103,0)",但<input>元素自身的value始终是"#ff6700" - 不要在
done里重复调用othis.val(color)——colorpicker已经自动同步了 input 值,再写一次可能引发重复渲染或状态错乱
input 元素的 value 始终是 #rrggbb 格式,与 format 无关
很多人设了 format: 'rgb',却发现 input 框里还是显示 #39c0ed,以为配置失效。其实这是设计行为:format 参数只影响面板顶部预览和 done 回调中 color 的格式,不改变 input 的实际值。
也就是说:<input id="color-input"> 的 .value 永远是十六进制,哪怕你传入 format: 'rgba' 或 alpha: true。
- 想读取当前选中值?直接用
document.getElementById('color-input').value就行,不用等done - 想拿到 RGB 字符串?需手动解析:
const rgb = /^#([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})$/i.exec(input.value) - 启用了
alpha: true?透明度值不会出现在value里,而是单独通过done的第三个参数(如果存在)或内部状态获取,目前官方未暴露 alpha 到 input 值中
动态生成表格单元格里的 colorpicker 怎么绑定和取值
在 table.render 的 done 回调里遍历渲染,是最稳妥的做法。因为表格 DOM 是异步插入的,过早调用 colorpicker.render 会找不到元素。
注意:每个单元格必须是一个独立的 <input type="text">,不能用 <div> 或其他标签替代——<code>colorpicker 只接受 input 作为绑定目标,否则静默失败,控制台也不报错。
- 模板里写:
templet: '<input type="text" class="cell-color" data-id="{{d.id}}">' -
done里批量初始化:layui.$('.cell-color').each(function(){ layui.colorpicker.render({ elem: this, done: function(color){ /* 更新对应 row 的数据对象 */ } }); }) - 取值时别依赖全局变量或闭包索引,用
this或othis定位当前 input,再结合data-id找到对应数据项
IE11 下取不到值?先检查弹层是否定位错位
IE11 对 getBoundingClientRect() 和 position: fixed 兼容性差,常导致 colorpicker 弹层飞出可视区,用户看似点了颜色,实则没真正触发 done,所以 color 拿不到。
这不是代码逻辑问题,而是渲染层失效。最典型的症状是:点击后无反应,console 也没报错,input 值不变,done 函数根本没执行。
- 临时修复:给触发
<input>加style="position: relative",并确保其父级没有transform、perspective或overflow: hidden - 更彻底的方案:降级使用原生
<input type="color">,配合 CSS 自定义样式,避免依赖新版colorpicker的复杂定位逻辑 - 别在 IE11 下测试
alpha: true—— 透明度面板本身就不稳定,容易导致整个弹层无法交互
真正容易被忽略的是:你写的 done 函数可能根本没执行,不是因为逻辑错,而是因为绑定目标不是 input、模块没显式加载、或 IE 下弹层压根没出来。调试时先确认这三点,比反复改回调内容更有效。











