如何清除Coloris颜色选择器的当前颜色预览矩形

这问题我之前做项目时也踩过坑！直接用jQuery清空input的value，确实只能更新输入框里的文字，但Coloris自己生成的右侧颜色预览块是独立维护的DOM元素，不会自动跟着变，得用正确的方式通知Coloris更新状态才行。

给你两个靠谱的解决办法：

方法一：用Coloris官方API（推荐） #

Coloris本身提供了专门的setColor方法，能直接同步输入框值和预览色块状态。你只需要传入空字符串和目标元素的选择器就行：

Coloris.setColor('', '#accent_color');

这样一行代码就搞定了——既会把input的值清空，也会自动把右侧的预览色块恢复到空白状态，完全不用手动操作DOM，官方方法最稳妥。

方法二：手动触发输入事件同步状态 #

如果你不想用API，也可以在清空input值之后，手动触发input事件，让Coloris监听到值的变化，自动更新预览块：

jQuery('#accent_color').val('').trigger('input');

原理是Coloris默认会监听输入框的input事件来同步预览状态，直接用val()赋值不会触发这个事件，所以我们手动触发一下就行。

两种方法都能解决你的问题，个人更推荐第一种，毕竟官方API是专门设计来处理这类场景的，后续Coloris版本更新也不容易出问题。

备注：内容来源于stack exchange，提问作者mstdmstd