如何实现Coloris.js颜色选择器在页面加载时默认打开？

要实现页面加载完成后直接打开Coloris颜色选择器，无需点击触发，你可以直接调用Coloris提供的Coloris.open()API，具体步骤如下：

• 确保已完成Coloris的基础初始化，绑定好目标元素（比如颜色输入框或自定义颜色块）
• 在DOM加载完成的事件回调中，调用Coloris.open()并传入目标元素

代码示例 #

假设你的页面中有一个颜色输入框：

<input type="color" id="targetColorPicker" />

初始化并自动打开选择器：

// 初始化Coloris（可根据需求添加配置）
Coloris.init({
  // 示例配置：比如设置选择器位置
  position: 'bottom',
});

// DOM加载完成后触发打开操作
document.addEventListener('DOMContentLoaded', () => {
  const targetEl = document.getElementById('targetColorPicker');
  // 调用API打开选择器
  Coloris.open(targetEl);
});

说明 #

• 你之前尝试的无障碍选项是用于优化键盘导航体验，并非控制选择器自动弹出；内联选项是让选择器以固定内嵌形式展示，而非弹出式交互，因此不符合你的需求。
• Coloris.open()是官方提供的手动触发选择器弹出的方法，直接传入绑定了Coloris的目标元素即可生效。
• 如果页面中有多个Coloris实例，务必传入对应目标元素，避免打开错误的选择器。

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